react reducx的使用

安装依赖

在React项目中，需要安装@reduxjs/toolkit和react-redux两个包：

npm install @reduxjs/toolkit react-redux

创建Redux相关文件

1. 创建slice

   • 使用createSlice创建slice，它会自动生成action creator和reducer。例如：

     import { createSlice } from '@reduxjs/toolkit';const counterSlice = createSlice({name: 'counter',initialState: {count: 0},reducers: {increment(state) {state.count++;},decrement(state) {state.count--;},addToNum(state, action) {state.count += action.payload;}}
     });export const { increment, decrement, addToNum } = counterSlice.actions;
     export default counterSlice.reducer;

2. 创建store

   • 使用configureStore创建store，它会自动配置中间件和Redux DevTools：

     import { configureStore } from '@reduxjs/toolkit';
     import counterReducer from './counterSlice';const store = configureStore({reducer: {counter: counterReducer}
     });export default store;

在React应用中使用Redux

1. 提供store

   • 在React应用的顶层组件中，使用<Provider>组件将store提供给整个应用：

     import React from 'react';
     import ReactDOM from 'react-dom';
     import { Provider } from 'react-redux';
     import store from './store';
     import App from './App';ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root')
     );

2. 在组件中使用Redux

   • 在React组件中，可以使用useSelector和useDispatch两个Hooks来读取state和分发action

     import React from 'react';
     import { useSelector, useDispatch } from 'react-redux';
     import { increment, decrement, addToNum } from './counterSlice';function Counter() {const count = useSelector(state => state.counter.count);const dispatch = useDispatch();return (<div><p>Count: {count}</p><button onClick={() => dispatch(increment())}>Increment</button><button onClick={() => dispatch(decrement())}>Decrement</button><button onClick={() => dispatch(addToNum(20))}>Add 20</button></div>);
     }export default Counter;

2. 创建异步Thunk

使用createAsyncThunk创建一个异步Thunk，它会自动生成pending、fulfilled和rejected的action类型。例如，假设你有一个API接口https://jsonplaceholder.typicode.com/users，你想要获取用户数据并更新state：

// src/thunks/userThunks.js
import { createAsyncThunk } from '@reduxjs/toolkit';export const fetchUserById = createAsyncThunk('users/fetchById',async (userId) => {const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);if (!response.ok) {throw new Error('Failed to fetch user');}return response.json();}
);

3. 创建Slice

在createSlice中处理异步Thunk的pending、fulfilled和rejected状态。你可以使用extraReducers来监听这些状态并更新state：

// src/slices/userSlice.js
import { createSlice } from '@reduxjs/toolkit';
import { fetchUserById } from '../thunks/userThunks';const initialState = {user: null,status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed'error: null
};const userSlice = createSlice({name: 'user',initialState,reducers: {},extraReducers: (builder) => {builder.addCase(fetchUserById.pending, (state) => {state.status = 'loading';}).addCase(fetchUserById.fulfilled, (state, action) => {state.status = 'succeeded';state.user = action.payload;}).addCase(fetchUserById.rejected, (state, action) => {state.status = 'failed';state.error = action.error.message;});}
});export default userSlice.reducer;

4. 创建Store

在store.js中配置store，引入你的slice和Thunk：

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './slices/userSlice';export const store = configureStore({reducer: {user: userReducer}
});

5. 在React组件中使用

在React组件中，你可以使用useDispatch来触发异步Thunk，并使用useSelector来读取state：

// src/components/UserComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchUserById } from '../thunks/userThunks';function UserComponent() {const dispatch = useDispatch();const { user, status, error } = useSelector((state) => state.user);const handleFetchUser = () => {dispatch(fetchUserById(1)); // 假设用户ID为1};return (<div><button onClick={handleFetchUser}>Fetch User</button>{status === 'loading' && <p>Loading...</p>}{status === 'succeeded' && (<div><h2>User Details</h2><p>Name: {user.name}</p><p>Email: {user.email}</p></div>)}{status === 'failed' && <p>Error: {error}</p>}</div>);
}export default UserComponent;

6. 提供Store

确保在顶层组件中使用<Provider>来提供store：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root')
);

2.多个reducer时， 使用combineReducers组合reducer

在store.js中，使用combineReducers将多个reducer组合成一个根reducer，然后传递给store。

// src/store.js
import { configureStore, combineReducers } from '@reduxjs/toolkit';
import userReducer from './slices/userSlice';
import counterReducer from './slices/counterSlice';const rootReducer = combineReducers({user: userReducer,counter: counterReducer
});export const store = configureStore({reducer: rootReducer
});