Question

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

我正在为reactstrap modal的示例项目中实现redux，这使我感到困惑，因为我的一个化简器没有第一次更新状态。考虑一下我的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，它也不会更新状态。它第二次工作并更新redux state。使用相同的redux设置，我对这些任务的CRUD工作正常。我误会了吗？

Answer 1

我建议使用mapDispatchToProps，因为此功能用于更新Redux存储。例如，您应该在点击处理程序中致电onTodoClick，例如以下。并更新redux存储。现在，您将在操作中得到“ toggleTodo”。接下来是使用mapStateToProps获取redux数据。这就是它的工作方式。

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

这里有一些链接可以使您更多地了解该概念。

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

Redux State未第一次更新

1 个答案: