Redux Reducer обновил значение, но не отражено в реквизитах

Question

Я установил некоторые значения в хранилище React Redux при использовании функции ComponentDidMount (). Redux Dev Tools показывает, что состояние было обновлено. Но в props Это не меняется.

Мой редуктор. js is,

const inititalState = {
    slickColumns: null,
    slickData: null
}

const reducer = (state = inititalState, actions) => {
    switch(actions.type) {
        case actionsTypes.SET_SLICK_GRID_COLUMNS: {
            return {
              ...state,
              slickColumns: columns
            };
        }
        case actionsTypes.SET_SLICK_GRID_DATA: {

            return {
              ...state,
              slickData: [...mock_slick_data]
            };
        }
        default: {
            return state;
        }
    }
}

export default reducer;

action. js,

import * as actions from './actions';
export const setSlickGridColumns = () => {
    return {
        type:actions.SET_SLICK_GRID_COLUMNS
    }
}
export const setSlickGridData = () => {
    return {
        type: actions.SET_SLICK_GRID_DATA
    }
}

main. js, (отображение Redux на состояние)

const mapStateToProps = state => {
  return {
    slickColumns: state.slickColumns,
    slickData: state.slickData
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onSetSlickDataColumns: () => {
      dispatch(actionTypes.setSlickGridColumns());
    },
    onSetSlickData: () => {
      dispatch(actionTypes.setSlickGridData());
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Dimensions()(Home));

в функции ComponentDidMount,

this.props.onSetSlickDataColumns(); // able to see this method is running and the state is updated in Redux Dev Tools
this.props.onSetSlickData();
console.log(this.props.slickColumns); // getting null here. 
dv.setItems(this.props.slickData);

Даже если в магазине обновлено состояние, я все еще не могу получить данные в подпорках? Почему? есть идеи?

index. js,

import slickReducer from './store/reducers/SlickGrid';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  slickReducer,
  composeEnhancers(applyMiddleware(thunk))
);
const app = (
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
    </Provider>

);
ReactDOM.render(app, document.getElementById("root"));

[Edit]: Первоначально я установил свойства объекта initialState как 'null; Добавление моего скриншота Redux здесь,

Добавление дополнительных журналов здесь. Это может помочь решить эту проблему. На самом деле экземпляр сетки создается в методе ComponentDidMount().

  componentDidMount() {
    console.log("[componentDidmount]....");
    this.props.onSetSlickDataColumns();
    this.props.onSetSlickData();
    console.log(this.props);

    if (this.props.slickColumns.length !== 0) {
      const grid = (this.gridInstance = new Grid(
        this.grid,
        dv,
        this.props.slickColumns,
        options
      ));

     //  ------------------
     }
 }

При выполнении объекта сетки, он не должен иметь пустых столбцов и пустой DataView.

Я вызывал метод setSlickGridColumns и setSlickGridData в различных методах жизненного цикла, таких как constructor, componentWillMount и помещал журналы консоли для реквизита в mapStateToProps, constructor, componentWillMount, * Методы 1039 * и componentDidMount тоже. Из журналов я получаю

[mapStateToProps]
this.props.slickColumns: null

[componentConstructor].... calling onSetSlickDataColumns() and onSetSlickData() methods here..
this.props.slickColumns: null

[componentwillmount].... calling onSetSlickDataColumns() and onSetSlickData() methods here..
this.props.slickColumns: null

[render] 
this.props.slickColumns: null

[componentDidmount].... calling onSetSlickDataColumns() and onSetSlickData() methods here..
this.props.slickColumns: null

[mapStateToProps]
this.props.slickColumns: Array(300) // Here props values are set

[render]
this.props.slickColumns: Array(300) 

Из журналов я понимаю, что данные должны быть заполнены до метода componentDidMount (). Но он не настраивается, хотя я отправил функцию редуктора в constructor и ComponentWillMount. Надеюсь, что эти журналы помогут решить эту проблему.

Answer 1

Проблема в том, что вы не устанавливаете новые данные в своем редукторе, который вы видите

const reducer = (state = inititalState, actions) => {
    switch(actions.type) {
        case actionsTypes.SET_SLICK_GRID_COLUMNS: {
            return {
              ...state,
              slickColumns : columns   // you have to pass your new data as payload from your function : actions.payload
            };
        }
        case actionsTypes.SET_SLICK_GRID_DATA: {

            return {
              ...state,
              slickData: [...mock_slick_data] // same here 
            };
        }
        default: {
            return state;
        }
    }
}

Вы можете передавать свои данные при отправке действия

dispatch(actionTypes.setSlickGridColumns('Pass your data here '));

Тогда вы можете получить данные в качестве аргумента, такие как

export const setSlickGridColumns = (data) => {
    return {
        type:actions.SET_SLICK_GRID_COLUMNS,
        payload : data // pass your data as payload 
    }
}  

Теперь вы можете использовать свои данные в редуктор , как actions.payload

 .......

 case actionsTypes.SET_SLICK_GRID_COLUMNS: {
                return {
                  ...state,
                  slickColumns : action.payload 
                };
 ........

Answer 2

попробуйте код ниже -> вам нужно вернуть диспетчер внутри mapDispatchToProps, как показано ниже

const mapDispatchToProps = dispatch => {
  return {
    onSetSlickDataColumns: () => {
      return dispatch(actionTypes.setSlickGridColumns());
    },
    onSetSlickData: () => {
      return dispatch(actionTypes.setSlickGridData());
    }
  };
};

Answer 3

На самом деле вы не собираетесь получать обновленные реквизиты в componentDidMount ловушке жизненного цикла, так как вы отправляете свою функцию после монтирования компонента. Вы получите обновленные реквизиты в ваших render, componentWillReceiveProps (не рекомендуется), getDerivedStateFromProps и некоторых других хуках жизненного цикла. Вы можете узнать больше о том, какие ловушки жизненного цикла вызываются при обновлении реквизита, в официальных документах реакции. И тогда вы пропускаете инструкцию return в mapDispatchToProps, как упоминалось в другом ответе.