react-redux- issue with dispatching actions

vnzz0bqm  于 2023-06-23  发布在  React
关注(0)|答案(1)|浏览(70)

我正在尝试调度到使用configureStore配置的redux存储。

const store = configureStore({reducer: {
    account: accountReducer,
    auth: authReducer
}});

我的“accountReducer”看起来像这样:

const initialState = {
  accountInfo: {}
};

export const accountReducer = (state = initialState, action) => {
  console.log(action.type);
  switch (action.type) {
    case "GET_ACCOUNT_INFO":
        return {
            ...state,
            accountInfo: action.payload
        };
    default:
      return state;
  }
}

这是应该分派动作“GET_ACCOUNT_INFO”的代码:

export const getAccountInfo = () => async (dispatch) => {
  var accountInfo = {};

  const token = localStorage.jwtToken;
  setAuthToken(token);

  const decoded = jwt_decode(token);
  const currentUsername = decoded.name;
  await fetch(`${Globals.API_URL}/account/info/?username=${currentUsername}`, { headers: { "x-access-token": token }})
    .then((res) => res.json())
    .then((data) => 
    {
      if(data.message != null)
      {
        accountInfo = {message: data.message};
      } else {
        accountInfo = data;
      }
      dispatch({
        type: "GET_ACCOUNT_INFO",
        payload: data
      });
    })
    .catch(error => {
      dispatch({
        type: "GET_ERRORS",
        payload: error
      });
    })
}

我尝试在我的组件中使用useDispatch(),控制台显示了这个:

@@redux/INIT0.a.n.8.r.6.r    accountReducer.js:6 
@@redux/PROBE_UNKNOWN_ACTION7.g.x.b.i.k    accountReducer.js:6 
@@redux/INIT0.a.n.8.r.6.r    accountReducer.js:6

如何使操作类型为“GET_ACCOUNT_INFO”而不是这个奇怪的字符串?

wwodge7n

wwodge7n1#

这些是Redux商店在启动时调度的内部操作,用于初始化状态。你可以而且应该忽略这些。
另外,请注意,虽然您正确地使用了Redux Toolkit中的现代configureStore API来设置商店,但您的reducer是使用旧的和不受欢迎的手写方法编写的。相反,你应该使用Redux Toolkit中的createSlice API:

const initialState = {
  accountInfo: {}
};

const accountsSlice = createSlice({
  name: "accounts",
  initialState,
  reducers: {
    accountInfoLoaded(state, action) {
      state.accountInfo = action.payload;
    }
  }
})

因此,您可以用RTK的createAsyncThunk替换手写的帐户获取形实转换程序。
请参阅我们文档中的Redux Essentials教程以了解更多细节:

相关问题