Question

我无法弄清楚为什么在分派功能之后，console.log中的Redux状态没有更新。

我试图将console.log放在打印函数之前和之后，并打印出Redux状态。但是，我找不到两个结果之间的任何区别。但是我确实看到组件更新为新状态。我想知道它是怎么发生的？调度工作如何进行，为什么在调度功能后立即看不到日志更改？

已更新：我添加了一些代码片段，并将我的关注点添加到注释中。非常感谢。

// reducer
export const reducer = (state, action) => {
    switch (action.type) {
        case NAMES_RECEIVED:
            return {
                ...state,
                namesArray: action.payload
            };
    }
}

// action: dispatch employee name to store
export const getEmployeeName = (dispatch, state) => {
    return employeeNameApi()
        .then(namesArray => {
            // will dispatch an data array
            console.log('before dispatch, state:', state)
            dispatch({ type: NAMES_RECEIVED, payload: namesArray })
            console.log('after dispatch, state:', state)
        })
};

// selector: get address from another api and combine address with name into a new data object for the use of component
export const generateDataForComponent = createSelector(
    state => state.namesArray,
    namesArray => {
        const promises = namesArray.map(name =>
            employeeAddressApi(name.id)
                .then(e => ({
                    employeeName: name.employeeName,
                    employeeAddress: e.employeeAddress,
                }))
        );
        return Promise.all(promises).then(data => data);
    }
);

// component: 
const Component = ({}) => {
    const [state, dispatch] = useContext(StoreContext);
    const [isDisplayTable, displayTable] = useState(false);
    const [tableData, setTableData] = useState([]);

    const onClick = () => {
        setData();
        displayTable(true)
    }

    const setData = () => {
        return getEmployeeName(dispatch, state)//namesArray will be dispatched into global state
            .then(() => generateDataForComponent(state)) //However I couldn't get updated state immediately in this selector. I am wondering why?
            .then(data => setTableData(data))
    }

    return (
        <div onClick={() => onClick()}>
            {isDisplayTable ? <Table columns={columns} data={tableData} /> : 'No Table'}
        </div>
    )
}

分派后，console.log中的Redux状态未更新吗？

0 个答案: