React-Redux学习笔记（自用）

1. 环境搭建

插件安装：Redux Toolkit和react-redux

npm i @reduxjs/toolkit react-redux

2、

store目录结构设计

集中状态管理的部分会单独创建一个store目录（在src下）
应用通常会有很多个子模块，所以还会有个modules目录，在内部编写业务分类的子store
store中的入口文件index.js的作用是组合modules中的所有子模块，并导出store

3、使用React Toolkit创建counterStore

创建各模块的store
counterStore.js

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

// 创建store
const counterStore = createSlice({
	name: 'counter',
	// 初始化state
	initialState: {
		count: 0
	},

	// 修改状态的方法 
	reducers: {
		inscrement(state) {
			state.count++;
		},
		decrement(state) {
			state.count--;
		}
	}
})


// 结构出actionCreater函数
const {inscrement, decrement} = counterStore.actions
// 获取reducer
const reducer = counterStore.reducer

// 以按需导出的方式导出actionCreater
export {inscrement, decrement}
// 以默认导出的方式导出reducer
export default reducer

在index,js中组合store

import { configureStore } from "@reduxjs/toolkit";
// 导入子模块reducer
import counterReducer from './modules/counterStore'


const store = configureStore({
    reducer: {
        counter: counterReducer
    }
})

export default store

4、为React注入store

React-redux负责把Redux和redux连接起来，内置Provider组件通过store参数把创建好的store实例注入到应用中。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store';
import { Provider } from 'react-redux';

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

reportWebVitals();

5、在React组件中使用store中的数据

使用useSelector钩子函数，把store中的数据映射到组件中


import React from 'react';
import './App.css';

import { useSelector } from 'react-redux';

function App() {
  // 这里state.counter和store中的reducer.counter是对应的
  const {count} = useSelector(state => state.counter);
  return (
    <React.Fragment>
      <div>
        {count}
      </div>
    </React.Fragment>
  );
}

export default App;

6、React组件中修改store中的数据

引入useDispatch钩子函数，作用：生成提交的action对象的dispatch函数


import React from 'react';
import './App.css';

import { useDispatch, useSelector } from 'react-redux';

// 倒入actionCreater
import {inscrement, decrement} from './store/modules/counterStore'

function App() {
  // 这里state.counter和store中的reducer.counter是对应的
  const {count} = useSelector(state => state.counter);
  const dispatch = useDispatch()

  return (
    <React.Fragment>
      <div>
        {/* 调用dispatch提交action对象 */}
        <button onClick={()=> dispatch(decrement())}> - </button>
        <span>
          {count}
        </span>
        <button onClick={() => dispatch(inscrement())}> + </button>
      </div>
    </React.Fragment>
  );
}

export default App;

7、在action中传参

在reducers的同步修改方法中添加action对象参数，在调用actionCreator时传递参数，参数会被传递到action对象的payload属性上
定义方法：通过payload获取传入的参数

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

// 创建store
const counterStore = createSlice({
	name: 'counter',
	// 初始化state
	initialState: {
		count: 0
	},

	// 修改状态的方法 
	reducers: {
		inscrement(state) {
			state.count++;
		},
		decrement(state) {
			state.count--;
		},
		addToNum (state, action) {
			// payload是固定属性
			state.count = action.payload
		}
	}
})


// 解构出actionCreater函数
const {inscrement, decrement, addToNum} = counterStore.actions
// 获取reducer
const reducer = counterStore.reducer

// 以按需导出的方式导出actionCreater
export {inscrement, decrement, addToNum}
// 以默认导出的方式导出reducer
export default reducer

使用

        <button onClick={() => dispatch(addToNum(10))}> add To 10</button>
        <button onClick={() => dispatch(addToNum(20))}> add To 20</button>

8、异步代码

store写法不变
单独封装一个函数，返回一个新函数，在新函数中：封装异步请求获取数据，并调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交
channelStore.js

import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const channelStore = createSlice({
	name: 'channel',
	initialState: {
		channelList: []
	},
	reducers: {
		setChannels(state, action) {
			state.channelList = action.payload
		}
	}
})

// 异步请求部分
const {setChannels} = channelStore.actions

const fetchChannelList = () =>{
	return async (dispatch) => {
		const res = await axios.get('http://geek.itheima.net/v1_0/channels')
		dispatch(setChannels(res.data.data.channels))
	}
}

const reducer = channelStore.reducer
export {fetchChannelList}
export default reducer

组件中dispatch的写法保持不变
store/index.js不变

import { configureStore } from "@reduxjs/toolkit";
// 导入子模块reducer
import counterReducer from './modules/counterStore'
import channelReducer from './modules/channelStore'

const store = configureStore({
    reducer: {
        counter: counterReducer,
        channel: channelReducer
    }
})  

export default store

在组件中使用

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

// 倒入actionCreater
import { fetchChannelList } from './store/modules/channelStore';

function App() {
  const {channelList} = useSelector(state => state.channel)
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(fetchChannelList())
  }, [])

  return (
    <React.Fragment>
      <div>
        {/* 调用dispatch提交action对象 */}
        <ul>
          {channelList.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
      </div>
    </React.Fragment>
  );
}

export default App;