Блог

Это очень простое приложение для перечисления репозиториев пользователя из github api. Мои консольные журналы вызываются внутри редуктора, поэтому я знаю, что это происходит, но мое новое состояние никогда не передается для обновления реквизитов компонентов.

Я новичок в react-native, но уже некоторое время использую React и redux. Я думаю, что это специфическая проблема для react-native, но я не могу понять, почему мои реквизиты не обновляются.

Кроме того, может быть важно отметить, что если я запускаю этот идентичный код (мои действия, функции reducer, store, connect и mapping) в create-react-app, он работает так, как ожидалось. Он выполняет запрос и возвращает новое состояние, как обычно.

Любые советы будут с благодарностью.

actions.js

 import Axios from 'axios';

export const REQUEST_POSTS = 'REQUEST_POSTS';
export const RECEIVE_POSTS = 'RECEIVE_POSTS';

export const requestPosts = () => ({
  type: REQUEST_POSTS,
});

export const receivedPosts = json => ({
  type: RECEIVE_POSTS,
  payload: json,
});

export function getData() {
  return (dispatch) => {
    dispatch(requestPosts());
    return Axios('https://api.github.com/users/angular/repos')
      .then(
        response => response.data,
        error => console.log('An error occurred.', error),
      )
      .then((json) => {
        dispatch(receivedPosts(json));
      });
  };
}
  

reducer.js

 
const initialState = {
  loading: false,
  repos: [],
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case REQUEST_POSTS:
      console.log('REQUEST_POSTS');
      return { ...state, loading: true };
    case RECEIVE_POSTS:
      console.log('RECIEVE_POSTS');
      return {
        ...state, repos: action.payload.data, loading: false,
      };
    default:
      return { ...state };
  }
};

export default reducer;
  

RepoList.js

 import { Text } from 'react-native';
import styled from 'styled-components/native';
import { connect } from 'react-redux';
import { getData } from '../../actions';

const Container = styled.View`
        padding: 16px;
        margin-top: 50px;
        flex: 1;
        align-items: center;
`;

const H1 = styled.Text`
    font-weight: bold;
    font-size: 40px;
`;

class RepoList extends Component {
  componentDidMount() {
    console.log('component did mount');
    this.props.getData();
  }

  render() {
    console.log('PROPS:', this.props);
    const myList = this.props.repos.map(repo => <Text key={repo.id}>{repo.name}</Text>);
    return (
      <Container>
        <H1>REPOS</H1>
        {
          this.props.loading
          amp;amp; <H1>Loading...</H1>
        }
        {myList}
      </Container>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    repos: state.repos,
    loading: state.loading,
  };
};

const mapDispatchToProps = {
  getData,
};

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

App.js

 import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import styled from 'styled-components/native';
import reducer from './src/reducers';
import RepoList from './src/components/RepoList';

const store = createStore(
  reducer,
  applyMiddleware(thunk),
);

const Wrapper = styled.View`
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
  `;
export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Wrapper>
          <RepoList />
        </Wrapper>
      </Provider>
    );
  }
}
  

Вы получаете ответы как «неопределенные» в компоненте? Если да, то в действии редуктора.вместо действия должна быть возвращена полезная нагрузка.полезная нагрузка.данные

 case "RECEIVE_POSTS":
  console.log("RECIEVE_POSTS");
  return {
    ...state,
    repos: action.payload.data,
    loading: false
  };