javascript - ReduxReducer更新了值但没有反射(reflect)在props中

Question

我在 ComponentDidMount() 函数中在 React Redux 存储中设置了一些值。 Redux Dev Tools 显示状态已更新。但在 props 中它并没有改变。

我的reducer.js是，

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

即使存储状态已更新，我仍然无法获取 Prop 中的数据？为什么？有什么想法吗？

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

[编辑]:最初我将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。

我在各种生命周期方法(例如constructor、componentWillMount)中调用了setSlickGridColumns和setSlickGridData方法并放置控制台还记录 mapStateToProps、constructor、componentWillMount、render 和 componentDidMount 方法中的 props 。从日志中我得到的是，

[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 中调度了 reducer 函数，它也没有设置。希望此日志有助于解决此问题。

Answer 1

问题是您没有在您可以看到的 reducer 中设置新数据

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)操作时传递数据

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

现在您可以在 reducer 中使用您的数据，例如 actions.payload

 .......

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