react-redux

react-redux

store：图书管理员
Component：借书用户
Action：用户说的话(要借什么书)
Reducer：记录本

Store

//安装Redux
yarn add redux

在src目录下新建一个名为store的文件夹，并创建一个index.js，此为store仓库的内容区域。基本步骤如下:

//1. 从redux中导入一个createStore的方法。
import  {createStore} from 'redux';

//2. 创建一个store
const store = createStore();

//3. 暴露模块
export default store

有了仓库store后，必须同时把reducer传给store。
只有store的话，他什么都不知道，所以创建一个reducer：

//1. 在store的同级目录下新建一个reducer.js
//在redux中，reducer需要返回一个函数
const defaultState = {}    //默认什么数据都不存储
export default (state = defaultState,action)=>{  //state:整个store仓库里的数据
//还需返回一个内容，先默认返回state；
    return state;
}

store.subscribe() //订阅

reducer

==reducer可以接受state==，但绝不可以修改state

1. 创建好reducer后，将其传递给store

import reducer from './reducer'

2. 创建store的时候，把reducer传递给store

const store = createStore();

• reducer存储着整个项目应用中的数据，这时候store就知道了仓库里数据有多少。
• 可以去reducer里查看，reducer管理仓库里的数据（怎么处理，怎么存）
• reducer必须返回一个函数。

action(改变store的数据，做通信)

//创建一个action
const action = {  //借书的同学说的一句话，
    type:'change_input_value',  //type说的话，值是你帮我去改变input的值
    value:e.target.value    //这个值应该是这处的value
}

dispatch

• store通过dispatch把action传递给store，但此时store不知道该怎么处理，所以又会去找reducer，store会把当前的prevState和action传给reducer。

• redux会自动把store里的prevState和action传给reducer

//
store.diapatch(action);    //action传给store

此时reducer拿到了数据后，对数据进行处理
因为reducer可以接受state，但绝不可以修改state**，所以给state做一个深拷贝，这是固定的做法。最后把拷贝的数据return 出去。（return以后，返回给了store）