Как получить данные из хранилища и использовать их в компоненте React Native

Question

Я установил Redux с реагировать на родной. Мне удается получить ответ от бэкэнда в создателе действия как res.data . Но всякий раз, когда я использую его в своем компоненте, он всегда оценивается как неопределенный или пустой.

мой создатель действий

export const getData = () => (dispatch: any) => {
  axios
    .get(`${API_URL}/api/request`)
    .then((res) => {
      dispatch({
        type: REQUESTS_FETCHED,
        requestData: res.data,
      });
      console.log(res.data);
    })
    .catch((err) => {
      console.error(err);
    });
};

И мой редуктор

const request = (state = initialState, action: any) => {
  switch (action.type) {
    case REQUESTS_FETCHED:
      return {
        ...state,
        requestData: action.requestData,
      };
    default:
      return state;
  }
};

Компонент, как показано ниже

class Request extends Component {
  componentDidMount = () => {
    const {getData} = this.props;
    getData();
  };
  render() {
    const {requestData}: any = this.props;
    return (
      <View style={styles.container}>
        {requestData &&
          requestData.map((data: any) => {
              <Text>{data.value}</Text> 
          })}
      </View>
    );
  }
}

const mapStateToProps = (state: any) => ({
  requestData: state.request.requestdata,
});
const mapDispatchToProps = {
  getData,
};

export default connect(mapStateToProps, mapDispatchToProps)(Request);

Обратите внимание: этот код используется в reactjs. Спасибо!

Answer 1

Вам необходимо вернуть этот текстовый элемент. Просто удалите фигурные скобки в вашем методе рендеринга (функция стрелки будет возвращать значение напрямую таким образом), т.е.

  render() {
    const {requestData}: any = this.props;
    return (
      <View style={styles.container}>
        {requestData && requestData.map((data: any) => <Text>{data.value}</Text>)}
      </View>
    );
  }

Answer 2

Возможно, у вас есть опечатка в mapStateToProps, это должно быть state.request.requestData

Answer 3

Единственное, что я вижу, это неправильно, это ваш mapStateToProps. Должно быть так:

const mapStateToProps = (state: any) => ({
    requestData: state.requestdata,
});