Redux state 变了，为什么不触发重新渲染？（Redux 传奇）

Question

我正在使用 react + redux + redux saga

我在呈现页面时遇到问题（GET 调用）电话应该是这样的：

构造函数
渲染（）
componentDidMount
渲染（）

但我刚刚达到 componentDidMount，mapDispatchToProps 正在调度操作，API 调用正在工作，通过它从服务器获取响应并更新数据进入状态。但是它在某个地方丢失了，我的组件甚至没有重新渲染。直到减速机，我在返回的地方获取数据 action.items.

itemReducer.js

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case types.GET_ALL_ITEMS_SUCCESS:
      console.log("itemReducer-----", action.items); //getting the data over here
      return action.items;
    default:
      return state;
  }
};

itemPage.js（组件）

class ItemsPage extends React.Component {
      componentDidMount() {
        this.props.loadItems();
      }

     render() {
        const { items } = this.props; // not even it renders, so not getting data
        ...
        return (<div>...</div>);
     }
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    loadItems: () => dispatch(loadAllItemsAction()),
  };
};

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

请给点建议，先谢谢了 :D

Answer 1

您需要了解 render/componentDidMount 的调用并不像预期的那样线性。 componentDidMount 在所有子节点为 mount 时触发。这并不意味着 render() 已经完成。

阅读此处了解更多信息： https://github.com/facebook/react/issues/2659

Answer 2

您发布的代码没有问题。为了确保我几乎复制粘贴了您共享的代码，填充了缺失的部分并且它工作得很好： https://codesandbox.io/s/3tuxv?file=/src/index.js

我的猜测可能是错误的是你的项目没有存储在 state.items 而是在一些不同的路径下或者你可能缺少 react-redux 提供者，但是如果没有看到就不可能肯定地说更多您的代码。

Redux state 变了，为什么不触发重新渲染？（Redux 传奇）

Redux state has changed, why doesn't it trigger a re-render? (Redux-saga)

reactjs

redux

redux-saga

react-redux

axios

itemReducer.js

itemPage.js（组件）

Redux state 变了，为什么不触发重新渲染？ （Redux 传奇）

Redux state has changed, why doesn't it trigger a re-render? (Redux-saga)

reactjs

redux

redux-saga

react-redux

axios

itemReducer.js

itemPage.js（组件）

Redux state 变了，为什么不触发重新渲染？（Redux 传奇）