Redux-Toolkit = 无法使用 useSelector 显示 API 响应数据

Question

我尝试通过使用react hook表单来过滤stockMovement报告来创建过滤器表单。流程是用户填写过滤器表单并单击过滤器提交按钮以将过滤器值分派给getStockMovement函数以调用API，我成功获得API响应数据，但无法通过使用useSelector将响应数据显示到我的界面。我把减速器和组件代码放在下面。

reportStockMovementSlice代码

import { createSlice, createAsyncThunk, createSelector} from '@reduxjs/toolkit';
import axios from 'axios';

export const getStockMovement = createAsyncThunk('report/stockMovement/getStockMovement', async( params,{dispatch})=> {
const {by} = params;
const response = await axios.get(`http://localhost:8100/getpickuppointbyid/pickupPointId={"pickupPointId":${by}}`);
const data = await response.data.results[0];
console.log("getStockMovement",data) --- response data successfull
return data === undefined ? null : data;
});

const reportStockMovementSlice = createSlice({
name: 'report/stockMovement',
initialState:{
stockMovement:[] },
reducers: {},
extraReducers: {
[getStockMovement.fulfilled]: (state, action) =>{
state.stockMovement =action.payload;}}
});

export const selectStockMovement = createSelector(
(state) => ({
stockMovement:state.stockMovement
}), (state) =>  state
);
export default reportStockMovementSlice.reducer;




>  StockMovementFilter Component Code
>         
>         import { getStockMovement, selectStockMovement  } from '../store/reportStockMovementSlice';
>         const result= useSelector(selectStockMovement);
>         console.log ("result---",result)   - undefined 
>      function StockMovementFilter(props) {   
>          /// button submit pass filter values to API
>         function submit (){
>         
>          dispatch(getStockMovement(getValues())).then(action=>{
>           console.log ("---action---",action) --- this have response result
>          })
>             console.log ("-----value",getValues()) - this value get from react hook form
>         }
}
export default withReducer('report', reducer) (StockMovementFilter);


> --- main stockMovementReport 
>     function StockMovementReport() {
>       return (
>           
>           <FusePageCarded
>               classes={{
>                   content: 'flex',
>                   // contentCard: 'overflow-hidden',
>                     toolbar: 'min-h-56 h-56 items-end',
>                   header: 'min-h-52 h-52 sm:h-136 sm:min-h-136'
>               }}
>               // header={<StockMovementHeader />}
>               content={<div> <div className="row"><StockMovementFilter/></div> <div
> className="row"><StockMovementTable /></div> </div>}
>               innerScroll
>           />
>       
>       );
>     }
>     
>     export default  withReducer('report',reducer) (StockMovementReport);

存储相结合

import reportStockMovement from './reportStockMovementSlice';
const reducer = combineReducers({
reportStockMovement 
});
export default reducer;

witReducer代码

import { injectReducer } from 'app/store/index';
const withReducer = (key, reducer) => WrappedComponent => {
injectReducer(key, reducer);
return props => <WrappedComponent {...props} />;
};
export default withReducer;

Answer 1

您的存储数据路径错误。

选择器总是从你的存储的根状态进行选择——在你的情况下，你只是有更多的嵌套。

我建议您使用Redux Devtools来查看您的存储是如何嵌套的，但是从您的combineReducers调用中，我会假设您的数据路径类似于state.reportStockMovement，因此您会想要做类似

的事情

export const selectStockMovement = (state) => state.reportStockMovement.stockMovement

顺便说一下，如果你真的只是从你的存储中选择数据，你不需要使用createSelector-只有当你在那里有一个复杂的计算或返回一个新对象时才使用它，在这种情况下，这可能是不必要的。

我建议阅读https://redux.js.org/recipes/computing-derived-data