React's redux template

You can refer to the teacher code at station b, the thief is detailed

The following is the template code

Install (add Redux Toolkit and React-Redux dependencies to your project)

npm install @reduxjs/toolkit react-redux

The following is the project directory

Templates in store/index.js

import {
    
     configureStore } from '@reduxjs/toolkit';
import setUserinfo from '@/store/features/userSlice';
// 创建仓库实例
const store = configureStore({
    
    
	// 合并多个slice中的reducer
	reducer: {
    
    
		user:setUserinfo 
	},
});
export default store;

Create modules (modular thinking), here is the template, common to all modules (src/features/userSlice.js)

import {
    
     createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
    
    
	name: 'user',
	initialState: {
    
    
		userinfo: {
    
    
		},
	},

	reducers: {
    
    
		setUserinfo(state, a) {
    
    
		   state.count += a.payload;
		},
	},
});

//异步情况
// 定义导出异步action
export const subAsync = (payload) => {
    
    
  console.log("payload", payload);
  return (dispatch, getState) => {
    
    
    console.log("getState", getState);
    setTimeout(() => {
    
    
      dispatch(setUserinfo(1));
    }, 3000);
  };
};

//导出方法
export const {
    
     setUserinfo } = userSlice.actions;

export default userSlice.reducer;

Introduce the template in main.jsx (just look at the four lines with horizontal lines below)

import {
    
     StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import store from '@/store';
---------------------------
import {
    
     Provider } from 'react-redux';
--------------------------------------
// 用 react-redux 提供的 Provider 组件，并且在渲染之前将根组件App包装进 <Provider>。
// 使用Provider组件将store作为prop注入整个react程序，注入之后程序中所有的组件中都可以使用store
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<StrictMode>
		<Provider store={
    
    store}>
		-----------------------
			<App />
		</Provider>
		-----------
	</StrictMode>
);

used inside the component

//useDispatch用来调用action里面的方法,useSelector 用来获取state里面的数据
import {
    
     useDispatch, useSelector } from 'react-redux';
// 导入action函数
import {
    
     setUserinfo } from '@/store/features/userSlice';

export default function App() {
    
    
	// 1、组件中访问redux的state
	// 通过useSelector直接拿到store中定义的user属性
	//useSelector的store参数为默认的store/index.js里面的模板reducer,通过.user找到里面属性对应的模块
	const {
    
     userinfo } = useSelector(store => store.user);
	//userinfo 为当前选中模块的state值
	
	// 2、组件中分发redux的action
	// 使用 useDispatch 钩子获取 dispatch 函数，并根据需要 dispatch actions
	const dispatch = useDispatch();

	return (
		<div className='App'>
		    <!--这里点击按钮就可以修改store的值了,通过dispatch调用action里面的setUserinfo方法进行传值-->
			<button onClick={
    
    () => dispatch(setUserinfo({
    
     name: '李四', age: 22 }))}>按钮3</button>
		</div>
	);
}

Here is the sample code for the template above

in store/index.js

import {
    
     configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counterSlice';
import userReducer from './features/userSlice';

// 创建仓库实例
const store = configureStore({
    
    
	// 合并多个slice中的reducer
	reducer: {
    
    
		counter: counterReducer,
		user: userReducer,
	},
});

export default store;

Create module one (modular idea), src/features/userSlice.js

import {
    
     createSlice } from '@reduxjs/toolkit';

export const userSlice = createSlice({
    
    
	name: 'user',
	initialState: {
    
    
		userinfo: {
    
    
			name: '张三',
			age: 18,
		},
	},

	reducers: {
    
    
		setUserinfo(state, {
     
      payload }) {
    
    
			console.log('setUserinfo: ', payload);
			state.userinfo = payload;
		},
	},
});

export const {
    
     setUserinfo } = userSlice.actions;

export default userSlice.reducer;

Create module 2 (modular thinking), src/features/counterSlice.js

import {
    
     createSlice } from '@reduxjs/toolkit';

// 创建slice
export const counterSlice = createSlice({
    
    
	// 添加唯一的标识
	name: 'counter',
	// 状态
	initialState: {
    
    
		count: 1,
	},

	// 1、定义reducer更新状态的函数
	// 2、是组件中dispatch使用的actions函数
	reducers: {
    
    
		// action函数，参数 state 就是状态
		increment(state) {
    
    
			console.log('increment state: ', state.count);
			state.count++;
    },

    // dispatch(incrementByData(2))
    // 参数 action 分发action时传递的数据，action中有两个属性  payload, type
    // payload 就是载荷，就是分发incrementByData 传递的数字2
    // type 是action的类型： counter/incrementByData

    // incrementByData (state, action) {
    
    
    //   console.log('incrementByData: ', action);
    // }
    incrementByData (state, {
     
     payload, type}) {
    
    
      console.log('payload: ', payload);
      state.count += payload
    }

	},
});

// console.log('counterSlice: ', counterSlice);

// 导出 action 函数
export const {
    
    
  increment,
  incrementByData
} = counterSlice.actions;

// 导出reducer
export default counterSlice.reducer;

Introduce the template in main.jsx

import {
    
     StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

import '@/setting';

// 用 react-redux 提供的 Provider 组件，并且在渲染之前将根组件App包装进 <Provider>。
// 使用Provider组件将store作为prop注入整个react程序，注入之后程序中所有的组件中都可以使用store
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<StrictMode>
		<Provider store={
    
    store}>
			<App />
		</Provider>
	</StrictMode>
);

used inside the component

import {
    
     useDispatch, useSelector } from 'react-redux';
// 导入action函数
import {
    
     increment, incrementByData } from '@/store/features/counterSlice';
import {
    
     setUserinfo } from '@/store/features/userSlice';

export default function App() {
    
    
	// 1、组件中访问redux的state
	// 通过useSelector直接拿到counter store中定义的count属性
	const {
    
     count } = useSelector(store => store.counter);
	const {
    
     userinfo } = useSelector(store => store.user);

	// 2、组件中分发redux的action
	// 使用 useDispatch 钩子获取 dispatch 函数，并根据需要 dispatch actions
	const dispatch = useDispatch();

	return (
		<div className='App'>
			<h1 className='h1'>hello react </h1>
			<p> count = {
    
    count} </p>
			<p> userinfo.name = {
    
    userinfo.name} </p>
			<p> userinfo.age = {
    
    userinfo.age} </p>
			<button onClick={
    
    () => dispatch(increment())}>按钮1</button>
			<button onClick={
    
    () => dispatch(incrementByData(2))}>按钮2</button>
			<button onClick={
    
    () => dispatch(setUserinfo({
    
     name: '李四', age: 22 }))}>按钮3</button>
		</div>
	);
}