如何在 redux-toolkit 中正确存储 action.payload？

Question

我正在使用 redux 工具包从 API 中获取用户并将用户的状态保存在商店中。

  userStore: {
    users: [],
    loading: true
  }
}

这出现在 firefox 的 redux-toolkit 开发工具中。

我期待它。

  userStore: {
    users: Array[..], //an array of 10 users
    loading: false
  }
}

我在index.js

配置了商店

const store = configureStore({
    reducer: {
        userStore: usersReducer,
    },
});

export default store;

userSlice.js


const initialState = {
    users: [],
    loading: false,
};

export const userSlice = createSlice({
    name: 'users',
    initialState,
    reducers: {
        receivedUserList: (state, action) => {
            state.users = action.payload;
        },
        toggleLoadingUsers: (state) => {
            state.loading = !state.loading;
        },
    },
});

export const { receivedUserList, toggleLoadingUsers } = userSlice.actions;

export default userSlice.reducer;

用户actions.js


export const fetchUsers = (data) => async (dispatch) => {
    try {
        dispatch(toggleLoadingUsers());
        const response = await userAPI.get('/users');
        dispatch(receivedUserList(response.data));
        dispatch(toggleLoadingUsers());
    } catch (error) {
        console.log(error);
    }
};

我在 App.js 中像这样使用 fetchusers。

    const dispatch = useDispatch();
    const { users, loading } = useSelector((state) => state.userStore);
    useEffect(() => {
        console.log('something');
        console.log(loading);
        console.log(users);
        dispatch(fetchUsers());
    }, []);

这没有正确更新状态。获取用户后如何设置状态？我在src/index.js

中通过了./store/index.js中的商店

import store from './store/index';
import { Provider } from 'react-redux';

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

Answer 1

Redux 工具包背后的想法是删除操作、类型和缩减器的样板代码，并将它们统一到一个切片中。

让我们重构用户切片代码如下。


import { createAsyncThunk } from "@reduxjs/toolkit";

export const fetchUsers = createAsyncThunk("users/fetchUsers", async (data) => {
  const response = await userAPI.get("/users");

  return response.data;
});

const initialState = {
  users: [],
  loading: false,
};

export const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    receivedUserList: (state, action) => {
      state.users = action.payload;
    },
    toggleLoadingUsers: (state) => {
      state.loading = !state.loading;
    },
  },

  extraReducers: {
    [fetchUsers.pending]: (state, action) => {
      state.loading = true;
    },
    [fetchUsers.fulfilled]: (state, action) => {
      state.loading = false;
      state.users = [...state.users, ...action.payload];
    },
    [fetchUsers.rejected]: (state, action) => {
      state.loading = true;
      state.error = action.error;
    },
  },
});

export const { receivedUserList, toggleLoadingUsers } = userSlice.actions;

export default userSlice.reducer;

然后从 userSlice

导入 fetchUsers

//top-level import 
import {fetchUsers} from "../userSlice"


    const dispatch = useDispatch();
    const { users, loading } = useSelector((state) => state.userStore);
    useEffect(() => {
        console.log('something');
        console.log(loading);
        console.log(users);
        dispatch(fetchUsers());
    }, []);

如何在 redux-toolkit 中正确存储 action.payload？

How to store action.payload in redux-toolkit correctly?

reactjs

react-redux

redux-toolkit