Redux 状态第一次没有更新答案

【问题标题】：Redux State not Updating the first timeRedux 状态第一次没有更新
【发布时间】：2019-03-26 03:43:20
【问题描述】：

我知道这个网站上发布了很多相同的问题，但没有一个链接到我的问题。 This 离我很近，但我还没有使用 DB。只是一个完整的react/redux 实现。

我在我的示例项目中为reactstrap modal 实现redux，这让我很困惑，因为我的一个reducer 没有第一次更新状态。考虑一下我的 redux 设置。

动作

export const showModal = (data) => {
   return {
    type: MODAL_TOOL,
    payload: data
  };
}

减速器

 const initialState = {
     isOpen: false
 };
 export default function(state=initialState, action) {
    switch(action.type) {
        case MODAL_TOOL:
            console.log(action.payload.isOpen); //logs true
            return {
                 ...state, 
                 isOpen: action.payload.isOpen
            }
        default: 
             return state;
   }
}

组合减速器

export default combineReducers({
    modal: modalReducer
});

组件

class TaskModel extends Component {
   state = {
       isOpen: this.props.modal.isOpen
   }
   onCreateTask = () => {
        this.props.showModal({
            isOpen: !this.props.modal.isOpen
        });

        this.setState({
            isOpen: this.props.modal.isOpen
        }); 
   }
   render() { 
       return(
          <Button
               size="sm"
               color="dark"
               style={{marginBottom: '2rem'}}
               onClick={this.onCreateTask}
           >
                Add Task
           </Button>
       )
   }       
}
const mapStateToProps = (state) => ({
     modal: state.modal
});

export default connect(mapStateToProps, { showModal })(TaskModel);

当我第一次单击按钮Add Task 时，即使reducer 的日志显示为true，它也不会更新状态。它第二次工作并更新reduxstate。我的任务 CRUD 在相同的redux 设置下工作正常。我是不是误会了什么？

【问题讨论】：

第一次怎么知道redux状态没有更新？？
为什么要跟踪它是否在州和商店中都开放？此外，更新 Redux 存储，就像 setState() 一样，是异步的。因此，您的 setState() 调用使用存储值 this.props.modal.isOpen 可能未使用正确的值，因为您在调度操作后同步调用它。
我想知道它是如何更新第二次的。 mapStateToProps 和 connect 需要放在课堂之外。
@Fawaz，我更新了组件。
@pritesh，我在减速器中记录状态，所以我知道当我第二次单击它时它会更新状态。

标签： reactjs redux reducers

【解决方案1】：

我推荐使用mapDispatchToProps，因为这个函数是用来更新redux store的。例如，您应该在点击处理程序中调用onTodoClick，如下所示。并更新 redux 商店。现在您将在您的操作中获得“toggleTodo”。接下来是使用mapStateToProps 获取redux 数据。它应该是这样工作的。

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (isOpen) => {
      dispatch(toggleTodo(isOpen))
    }
  }
}

这里有一些链接可以获取更多关于这个概念的信息。

https://learn.co/lessons/map-dispatch-to-props-readme

【讨论】：