reactjs - 使用 react-redux / redux-watch 在 React 应用程序中访问状态时出现问题

Question

我试图在触发 Redux-watch store.subscribe() 时访问我的商店的 state.X（通过更新 state.Y），但我只能访问初始状态值。我正在使用 Redux-toolkit、React-redux、React-watch

当我按下 UI 按钮后调用“打印”函数时，我的状态会显示为所需的值，但是当我在 Redux-watch subscribe() 函数中调用“打印”函数时，state.X 有它的初始值。知道有什么问题吗？

从商店获取状态。 const date = useSelector((state) => state.calendar);

打印功能：const print = () =>{console.log(date);}

Redux-watch 订阅功能：

let wData = watch(store.getState, 'calendar.monthData');     
const unsubscribeWData = store.subscribe(wData((newVal, oldVal, objectPath) => 
        {
            if(newVal !== oldVal)
            {
                console.log(newVal); //array with new values
                print(); //state has initial values
            }
               
        }));

Redux-toolkit 切片：

const calendarSlice = createSlice({
    name: "calendar",
    initialState: {
        date: "", //state.X
        monthData: [], //state.Y
    },
    reducers: {
      currentDateAction: (state,action) =>
      {
          const { newDate} = action.payload;
          state.date = newDate;
      }
    },
    extraReducers: builder => {
        builder.addCase(fetchCalendarMonthSum.fulfilled, (state, action) => {
          state.monthData = action.payload;
          })
    }
  });
export const {currentDateAction} = calendarSlice.actions;
export default calendarSlice.reducer;

标签： reactjsreduxreact-reduxredux-toolkit

Answer 1

最后，我设法通过直接调用 store.getState() 在 subscribe() 函数中获取了 store 的状态。

虽然我没有弄清楚为什么变量“日期”在 subscribe() 方法执行时设置为初始状态值，但我猜这是在调用 subscribe() 函数时更新状态的原因。所以要在 subscribe() 方法中获取状态：

let wData = watch(store.getState, 'calendar.monthData');     
const unsubscribeWData = store.subscribe(wData((newVal, oldVal, objectPath) => 
        {
            if(newVal !== oldVal)
            {
                console.log(store.getState().calendar.date)
            }
               
        }));