1.什么是Redux？
Redux是一个管理状态（数据）的容器，提供了可预测的状态管理
2.什么是可预测的状态管理？
数据在什么时候? 因为什么?发生了什么改变?都是可以控制和追踪的， 我们就称之为预测的状态管理
3.为什么要使用Redux？
- React是通过数据驱动界面更新的，React负责更新界面， 而我们负责管理数据
- 默认情况下我们可以在每个组件中管理自己的状态， 但是现在前端应用程序已经变得越来越复杂
状态之间可能存在依赖关系（父子、共享等），一个状态的变化会引起另一个状态的变化 - 所以当应用程序复杂的时候， 状态在什么时候改变，因为什么改变，发生了什么改变，就会变得非常难以控制和追踪
- 所以当应用程序复杂的时候，我们想很好的管理、维护、追踪、控制状态时， 我们就需要使用Redux
4.Redux核心理念
- 通过
store来保存数据 - 通过
action来修改数据 - 通过
reducer将store和action串联起来
模拟数据表示三者之间的关联
const initialState = {
heroes:[
{name:'鲁班'， age:18},
{name:'虞姬'， age:22},
]
}
const action = {type:'CHANGE_NAME', playload:{index:0, newName:'黄忠'}}
const action = {type:'CHANGE_AGE', playload:{index:1, newAge:66}}
function reducer(state = initialState, action){
switch(action.type){
case: 'CHANGE_NAME':
// 修改姓名
return newState;
case: 'CHANGE_AGE':
// 修改年龄
return newState;
}
}
-------------
---------> | Component | ---------
| ------------- |
| ↓
------------- ------------- -------------
| Store | <---- | Reducer | <---- | Action |
------------- ------------- -------------
1.Redux三大原则
-
单一数据源
- 整个应用程序的state只存储在一个 store 中
- Redux并没有强制让我们不能创建多个Store，但是那样做并不利于数据的维护
- 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改
-
State是只读的
- 唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State
- 这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改stat；
- 这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition（竟态）的问题；
-
使用纯函数来执行修改
- 通过reducer将 旧state和 action联系在一起，并且返回一个新的State：
- 随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分
- 但是所有的reducer都应该是纯函数，不能产生任何的副作用
2.什么是纯函数？
- 返回结果只依赖于它的参数，并且在执行过程里面没有副作用
// 纯函数
function sum(num1, num2){
return num1 + num2;
}
// 非纯函数
let num1 = 10;
function sum(num2){
return num1 + num2;
}
// 纯函数 const 定义的变量是不能改变的，因此不会影响到外部变量，是纯函数
const num1 = 10;
function sum(num2){
return num1 + num2;
}
官方文档： https://www.redux.org.cn/docs/introduction/ThreePrinciples.html
3.Redux 的使用
Redux 除了和 React 一起用外，还支持其它界面库
- 安装稳定版：
npm install --save redux - 使用redux
const redux = require('redux');
// 定义一个状态
let initialState = {
count: 0
};
// 利用store来保存状态（state）
const store = redux.createStore(reducer);
// 利用action来修改状态
const addAction = {type:'ADD_COUNT', num: 1};
const subAction = {type:'SUB_COUNT', num: -1};
// 利用reducer将store和action串联起来
function reducer(state = initialState, action) {
switch (action.type) {
case 'ADD_COUNT':
return {count: state.count + action.num};
case 'SUB_COUNT':
return {count: state.count - action.num};
default:
return state;
}
}
// 在组件中如何监听状态的改变？
store.subscribe((a)=>{
console.log(store.getState());
});
// 在组件中如何从Store中获取存储的状态？
console.log(store.getState());
// 在组件中如何修改Store中存储的状态？
store.dispatch(addAction);
// console.log(store.getState());
4.Redux的优化
当前代码存在的问题：
- store、action、reducer代码都写在一个文件中， 不利于维护
- action和reducer中都是使用字符串来指定和判断操作类型， 写错不报错
-
action中的操作写死了， 不够灵活
image.png
// app.js
import React from 'react';
import store from './store/store';
import {addAction, subAction} from './store/action';
class App extends React.PureComponent{
constructor(props){
super(props);
this.state = {
count: store.getState().count
}
}
componentDidMount() {
store.subscribe(()=>{
this.setState({
count: store.getState().count
})
})
}
componentWillUnmount() {
store.unsubscribe();
}
render(){
return (
<div>
<p>{this.state.count}</p>
<button onClick={()=>{this.btnClick()}}>增加</button>
</div>
)
}
btnClick(){
store.dispatch(addAction(5));
}
}
export default App;
//store.js
import {createStore} from 'redux';
import reducer from './reducer';
// 利用store来保存状态（state）
const store = createStore(reducer);
export default store;
// constants.js
export const ADD_COUNT = 'ADD_COUNT';
export const SUB_COUNT = 'SUB_COUNT';
//action.js
import {
ADD_COUNT,
SUB_COUNT
} from './constants';
// 利用action来修改状态
// const addAction = {type:ADD_COUNT, num: 1};
// const subAction = {type:SUB_COUNT, num: -1};
export const addAction = (num)=>{
return {type:ADD_COUNT, num: num};
};
export const subAction = (num)=>{
return {type:SUB_COUNT, num: num};
};
//reducer.js
import {
ADD_COUNT,
SUB_COUNT
} from './constants';
// 定义一个状态
let initialState = {
count: 666
};
// 利用reducer将store和action串联起来
function reducer(state = initialState, action) {
switch (action.type) {
case ADD_COUNT:
return {count: state.count + action.num};
case SUB_COUNT:
return {count: state.count - action.num};
default:
return state;
}
}
export default reducer;
