redux与react-redux学习笔记
一、redux
1、安装 yarn add redux
2、工作原理图解析
流程步骤：
React Components(客人)： react组件想要做什么事情，比如做加法运算
Action Creators(客人选择做菜的方式和选什么菜): 将菜单写好发送给饭店老板(store)，action有两个参数 store.dispatch({ type: ‘用哪种方式做’, data: ‘做什么菜’ })
import store from '../../redux/store';
import { createIncrementAction, createDelcrementAction } from '../../redux/count_action';
inCrement = () => {
const { value } = this.selectState; // 这是要传入计算的值
// createIncrementAction这个是从count_action.js中封装好的action方法
store.dispatch(createIncrementAction(value));
};
Store（饭店老板）： 将菜单发给厨师，同时负责将厨师做好的菜送到客人面前
创建store.js文件
import { createStore } from 'redux'; // 从redux中取出创建仓库函数
import Reducer from './count_reducers'; // 引入加工的reducer
export default createStore(Reducer); // 创建实例同时传入reducer并暴露加工后的reducer值
Reducers（厨师）：将菜单上的做菜方式和客人选的菜做好后交给老板，他有两个参数 preState,action
preState：上一个值，也可以直接在形参中初始值
action：接收到客人的action对象，其中有type和data
创建count_reducer.js文件
import { INCREMENT, DELCREMENT } from './constants';
export default function Reducer(initPreState = 0, action) {
const { type, data } = action;
switch (type) {
case INCREMENT:
return initPreState + data * 1;
case DELCREMENT:
return initPreState - data * 1;
default:
return initPreState;
}
}
最终React Components (react组件)希望拿到reducers计算后的值就需要从Store身上获取
const count = store.getState() // 取值
store.getState() // 页面显示
页面更新（订阅）：subscribe（注意别写成subscript）
两种方式
1、在使用的组件中用ComponentDidMount生命周期中更新
store.subscribe(()=>{
this.setState({})
})
2、一劳永逸，直接在index.js react入口文件的渲染root根标签外部用store.subscribe包裹，好处是整个root内部的所有文件的store都有实时数据更新的效果
store.subscribe(() => {
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
});
3、优化：
1、action常量集
创建constants.js
作用：一般用于reducers中使用，如果需要更改方法直接在constants.js常量集 中修改type类型，
constants.js
export const INCREMENT = 'inCrement'
例如现在在reducers.js中
import { INCREMENT, DELCREMENT } from './constants';
export default function Reducer(initPreState = 0, action) {
const { type, data } = action;
switch (type) {
case INCREMENT:
return initPreState + data * 1;
case DELCREMENT:
return initPreState - data * 1;
default:
return initPreState;
}
}
2、封装创建action方法常量集
创建count_action.js 作用：封装一个action对象
import { INCREMENT } from './constants';
export const createIncrementAction = data => ({ type: INCREMENT, data })
使用的页面需要引入封装好的action方法
import { createIncrementAction } from '../../redux/count_action';
示例：
store.dispatch({ type: 'delCrement', data: value }); // 这是没封装前的传参
store.dispatch(createDelcrementAction(value)); // 使用封装的action
4、传递异步action
action有两种方式传参
第一种：传对象 { type: 'inCrement', data } 同步的
第二种: 传函数 异步的 延迟操作或者接口不喜欢在组件内调用就可以统一写在封装count_action.js集里面
// 引入redux自带的异步中间件 yarn add redux-thunk
// 为啥要下载这个插件？ 因为redux异步需要中间件的支持才能传递action，所以这是必经之路。
// 在store.js中导入取出，同时从redux中取出应用中间件函数 applyMiddleware
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
// 然后在暴露仓库的参数中应用一下，将第三方插件引入，这样整个store仓库就可以接收和返回异步action了
export default createStore(Reducer, applyMiddleware(thunk));
count_action.js
export const createIncrementAction = data => ({ type: INCREMENT, data });
export const createIncrementAsyncAction = (data, delay) => {
return dispatch => {
setTimeout(() => {
// 由于我们需要的方法其他action已经有了，所以可以直接使用,只需要将我们需要传的参数传入即可
// 分发有两种写法
// 一种是顶部引入store.js文件
// store.dispatch(createIncrementAction(data))
// 第二种是直接在当前return 这个函数体中本身就是在返回store对象，所以可以从形参dispatch直接 传，这样就少写store和少导入store.js文件。
dispatch(createIncrementAction(data));
}, delay);
};
};
组件中使用
导入
import { createIncrementAsyncAction } from '../../redux/count_action';
asyncCrement = () => {
const { value } = this.selectState;
store.dispatch(createIncrementAsyncAction(value, 500));
};
二、React-redux (facebook)
1、安装 yarn add react-redux
2、工作原理图解析
容器组件：主要存放容器UI，它自身拥有操作store中的状态和数据的方法api
容器UI：通过this.props获取到容器组件传递过来的store数据进行页面渲染
创建 containers 文件夹并在下面创建 Count 文件 -> index.js (存放容器组件的)
containers -> Count -> index.js
// 引入容器UI
import CountUI from '../../components/Count';
// 取出connect 容器UI 和 容器组件的连接器
import { connect } from 'react-redux';
// 引入封装好的action方法
import {
createIncrementAction,
createDelcrementAction,
createIncrementAsyncAction,
} from '../../redux/count_action';
// 修改store数据 形参是store中的reducer处理后返回给它的数据赋值给count属性，再将count属性传递给子组件，子组件Count就可以通过this.props.count获取到store中的数据了
const mapStateToProps = state => {
return { count: state };
};
// 分发action到store去修改状态
const mapDispatchToProps = dispatch => {
return {
jia: number => dispatch(createIncrementAction(number)),
jian: number => dispatch(createDelcrementAction(number)),
jiaAsync: (number, delay) => dispatch(createIncrementAsyncAction(number, delay)),
};
};
// 连接器需要通过调用两个函数并传入相关参数，
// 第一个函数有两个参数
// 两个参数都是得传{}形式，一个映射取数据，另一个是映射发送action到store让reducer去修改状态
// 第二个函数是传入一个容器UI从而生成一个容器组件
// 整句代码的意思是传入要加工的action和导入组件并创建暴露出容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);
在App.jsx 入口文件引入 Count 容器组件用于渲染，为了让store的数据给Count 容器组件内的容器UI都能使用，需要引入并在组件中传递
App.jsx
import React, { Component } from 'react';
import Count from './containers/Count'; // 容器组件
import store from './redux/store'; // 1
export default class App extends Component {
render() {
return (
<div>
<Count store={store} /> // 1
</div>
);
}
}
component（存放容器UI）
component -> count -> index.jsx 当前容器UI
inCrement = () => {
const { value } = this.selectState;
// 通过this.props取值
this.props.jia(value);
};
3、优化
1、容器组件代码 connect第一个回调传递有两种方式
/* 第一种 用函数变量形式传入
修改store数据 形参是store中的reducer处理后返回给它的数据赋值给count属性，再将count属性传递给子组件，子组件Count就可以通过this.props.count获取到store中的数据了
*/
const mapStateToProps = state => {
return { count: state };
};
// 分发action到store去修改状态
const mapDispatchToProps = dispatch => {
return {
jia: number => dispatch(createIncrementAction(number)),
jian: number => dispatch(createDelcrementAction(number)),
jiaAsync: (number, delay) => dispatch(createIncrementAsyncAction(number, delay)),
};
};
// 创建一个容器组件并链接容器UI 传入两个映射函数变量
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);
/* 第二种 利用react-redux自带的dispatch以及语法优化让代码更简洁，当然也需要看得懂才行
创建一个容器组件并链接容器UI
第一个参数 直接将state表达式写入connect()
第二个参数 用对象key: value的形式传入，直接调用封装好的action函数就可以，这个参数对象react-redux会自动加上dispatch，所以不用再手动写dispatch */
export default connect(
state => ({ count: state }),
{jia: createIncrementAction,
jian: createDelcrementAction,
jiaAsync: createIncrementAsyncAction})
(CountUI);
2、 引入Provider并在标签中传入store，这样App下的所有组件都可以使用到store的状态和数据了
优化前：
redux还需要在index.js中使用store.subscribe让所有App下的应用使用store都能实时更新，同时哪些容器组件，例如Count中要给自身的容器UI传store还要在容器组件Count中进行引入和传值
缺点：如果多个容器组件那么需要给每个容器组件传store，见下面的ForExample1、ForExample2
App.jsx
import Count from './containers/Count';
import store from './redux/store';
export default class App extends Component {
render() {
return (
<div>
<Count store={ store } />
<ForExample1 store={ store } />
<ForExample2 store={ store } />
</div>
);
}
}
优化后：
项目根目录入口文件 index.js
import store from './redux/store';
import { Provider } from 'react-redux';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
3、容器组件和容器UI整合版
优化目的：
原本每生成一个容器组件就需要创建容器组件和容器UI文件，1 -> 2，量多文件就翻倍增长
容器UI：components -> Count -> index.jsx
容器组件：contaners -> Count -> index.jsx
优化后代码：
constaners -> Count -> index.jsx
/*
四个步骤:
1、创建容器UI
2、导入react-redux连接器 connect
3、连接容器UI创建并生成容器组件暴露出去
4、连接时传入映射状态和映射操作方法
*/
import React, { Component } from "react";
import { connect } from "react-redux"; // 2
import { createIncrementAction } from "../../redux/count_action";
// 1
class Count extends Component {
increment = () => {
this.props.incrementFN(1);
};
render() {
return (
<div>
<h2>当前计算后的值 {this.props.sumCount} </h2>
<button onClick={this.increment}>加1</button>
</div>
);
}
}
// 3 4
export default connect((state) => ({ sumCount: state }), {
incrementFN: createIncrementAction,
})(Count);
为了让每个新增的对象都拥有唯一的ID，所以可以使用第三方插件nanoid，当然也可以用时间戳或者其他方式
安装命令 yarn add nanoid
如何使用
import { nanoid } from 'nanoid'
直接调用即可 <div> { nanoid() } </div>
combindReducer：可以用对象形式合并多个reducer为一个总reducer，统一发给store进行操作，让redux不再只为一个reducer服务
从redux引入 用对象key:value的形式传入，这样store就可以保存所有状态了
store.js
import { createStore, applyMiddleware, combineReducers } from 'redux'
import countReducer from '../redux/reducers/count';
import personReducer from '../redux/reducers/person';
export default createStore(
combineReducers({
count: countReducer,
person: personReducer
})
, applyMiddleware(thunk));
页面获取store中的状态、
以Person容器组件为例
connect连接器保存着组件的状态，state就是当前容器组件保存在store中的数据，当前容器组件还可以获取其他容器组件的状态。这一过程实现了状态数据共享。
export default connect(
(state) => ({ renArr: state.person, countSum: state.count }),
{
jiayiren: createPersonAction,
}
)(Person);
4、react redux 开发工具的使用
store.js
/* 下载命令 yarn add redux-devtools-extension
引入 import { composeWithDevTools } from 'redux-devtools-extension'
将 composeWithDevTools 整个react-redux开发工具包裹整个异步action
composeWithDevTools(applyMiddleware(thunk)) */
export default createStore(
combineReducers({
he: countReducer,
rens: personReducer
})
, composeWithDevTools(applyMiddleware(thunk)));
5、将所有容器组件的reducer汇总到一个js文件中，store使用reducer就直接引入这个js文件进行操作
优点：这样如果需要修改reducer或者新增reducer就只需在reducer -> index.js中进行操作，同时store.js中也无需引入大量的reducer，代码更清晰、后期更好维护、更人性化。
reducer -> index.js
在reducer下创建index.js,在该文件中引入所有容器组件的reducer，最终统一暴露一个汇总后的reducer对象
import count from './count';
import person from './person';
// 引入整合reducer方法
import { combineReducers } from 'redux';
export default combineReducers({count, person})
store.js
// 引入统一汇总后的reducer
import reducer from './reducers'
export default createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));