Redux状态首次未更新

Question

我知道这个网站上有很多相同的问题，但没有一个与我的问题相关联。 这个 与我的问题接近，但我还没有使用数据库 。只是完整的react/redux实现。

我正在为reactstrap modal中的示例项目实现redux，并且因为其中一个reducer在第一次更新状态时没有起作用而让我感到困惑。请考虑我的redux设置。 Action

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

Reducer

 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;
   }
}

合并Reducer

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);

当我第一次点击“添加任务”按钮时，即使从reducer中的日志显示为true，它也不会更新状态。第二次点击才能更新redux状态。我的任务CRUD在相同的redux设置下运作良好。我是否有什么误解？

- HTTP

---

你如何知道 Redux 状态在第一次更新时没有被更新？ - pritesh

为什么要在状态和存储中都跟踪是否打开？此外，更新Redux存储与setState()一样是异步的。因此，使用存储值this.props.modal.isOpen的setState()调用可能不会使用正确的值，因为您在调度操作后同步调用它。 - Jayce444

我想知道它第二次如何更新。mapStateToProps和connect需要放在类外面。 - Fawaz

@Fawaz，我更新了组件。 - HTTP

@pritesh，我在reducer中记录状态，这样我就知道当我第二次点击时它会更新状态。 - HTTP

无论您是否正在记录，只需将 isOpen 保留在 redux 或状态中的一个位置即可，不要同时存在两个地方。 - Fawaz

Answer 1

我建议使用 mapDispatchToProps，因为这个函数是用来更新redux store的。你应该像下面这样在点击处理程序中调用 onTodoClick。并更新redux store。现在你会在你的actions中得到'toggleTodo'。接下来是使用mapStateToProps来获取redux数据。这就是它应该工作的方式。

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

以下是有关该概念的更多信息链接。

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

（Note: 本文中的HTML标签已保留）

- Mustkeem K