调用reducer后状态不更新（react-native）

Question

这是一个非常基本的应用程序，用于列出来自github api的用户的回购。我的控制台日志是在reducer中调用的，所以我知道它被击中，但我的新状态永远不会被传递下来更新组件props。

我比较新的反应原生，但现在已经使用React和redux了一段时间。我认为这是一个反应原生的具体问题，但对于我的生活，我无法弄清楚为什么我的道具没有更新。

此外，重要的是要注意，如果我在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
          && <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>
    );
  }
}

Answer 1

你在组件中得到“未定义”的respos吗？如果是，则应在reducer action.payload中返回而不是action.payload.data

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