Redux State не обновляется с первого раза - PullRequest
Новая
       18

Redux State не обновляется с первого раза

0 голосов
/ 22 октября 2018

Я знаю, что на этом сайте размещено много одинаковых вопросов, но ни один из них не связан с моей проблемой. Это близко к моему, но я еще не работаю с БД.Просто полная react/redux реализация.

Я использую в моем примере проекта redux для reactstrap modal и смущаю меня, потому что один из моих редукторов не обновляет состояние в первый раз.Рассмотрим мою настройку притока.

Действие 

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 в первый раз, он не будет обновлять состояние, даже если журнал из редуктора показываетправда.Работает 2 раза и обновляет redux state.Мой CRUD для задач работает нормально с той же настройкой redux.Я что-то не так понял?

1 Ответ

0 голосов
/ 22 октября 2018

Я рекомендую использовать mapDispatchToProps, потому что эта функция предназначена для обновления избыточного хранилища.Вы должны позвонить onTodoClick, например, как показано ниже в вашем обработчике кликов.И обновить магазин приставок.Теперь вы получите «toggleTodo» в ваших действиях.Далее используется mapStateToProps для получения избыточных данных.Вот как это должно работать. 

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

Вот некоторая ссылка, чтобы получить больше информации о концепции.

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

...