Redux原理及工作流程和使用方法（四）
使用Redux目的：
在react中组件与组件之间的通信很麻烦，于是借用redux进行第三方的通信
通过把数据存储在公共区域store里，实现各个组件间快速通信
一、Redux结构图
Redux的三个非常重要的组成部分：
- action
- reducer
- store
action 通知 reducer 修改 state，store 管理 state。
注：store是一个联系和管理。具有如下职责
- 维持应用的state；
- 提供getState()方法获取 state
- 提供dispatch(action)方法更新 state；
- 通过subscribe(listener)注册监听器;
- 通过subscribe(listener)返回的函数注销监听器。
各部分的身份
把这个过程比拟成图书馆的一个流程来帮助理解。
- React Component（借书的人 ）
需要借书的人 - Action Creator（具体借书的表达）
想借书的人向图书馆管理员说明要借的书的那句话。 - Store（图书馆管理员）
负责整个图书馆的管理。是Redux的核心 - Reducers（图书馆管理员的记录本）
管理员需要借助Reducer（图书馆管理员的记录本）来记录。
工作流程
借书的人（ReactComponent）说了一句话（Action Creator）向图书馆管理员（Store）借一本书，图书馆管理员年纪大了啊记不住啊，便掏出了自己的记录本（Reducers）。看了看知道了那本书有没有，在哪，怎么样。这样一来管理员就拿到了这本书，再把这本书交给了借书人。
翻译过来就是：
组件想要获取store中的数据State， 用ActionCreator创建了一个请求交给Store,Store借助Reducer确认了该State的状态，Reducer返回给Store一个结果，Store再把这个State转给组件。
二、使用Antd栈（UI页面布局）实现TodoList页面布局
1、安装antd栈：
npm install antd --save
2、引入样式：
import 'antd/dist/antd.css';
3、从 antd 引入相应模块
如：Input, Button, List。。。
//入口文件：index.js
ReactDOM.render(
<TodoList/>,
document.getElementById('root')
)
//TodoList组件
import React, { Component } from "react";
import { Input, Button, List } from "antd";//通过antd栈官网引入需要的组件
import 'antd/dist/antd.css';//引入antd栈的样式文件
//列表中要显示的数据
const data = [
'Racing car sprays burning fuel into crowd.',
'Japanese princess to wed commoner.',
'Australian walks 100km after outback crash.',
'Man charged over missing wedding girl.',
'Los Angeles battles huge wildfires.',
];
//TodoList
class TodoList extends Component{
render() {
return(
<div style={{marginTop:'10px', marginLeft:'10px'}}>
<div >
<Input placeholder = 'qq' style = {{width:'300px', marginRight:'10px'}} />{/* 属性placeholder：默认显示的值*/}
<Button type="primary">提交</Button>
</div>
<List
style={{marginTop:'10px', width:'300px'}}
bordered
dataSource={data}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
</div>
)
}
}
export default TodoList;
三、使用Redux
Redux是解决数据传递问题的框架，它把数据统一放在store中进行管理。所以在Redux中，store是最重要的一个环节，在编码中也要先创建store！！！
1、安装Redux
npm install --save redux
2、创建Store
在src下新建一个文件夹store，然后创建一个index.js文件，用于存放store中的代码：
//首先从redux这个第三方模块引入createStore方法，调用这个方法就可以创建一个store
import { createStore } from 'redux';
const store = createStore();//创建store
export default store;//导出store
3、引出reducer这个身份并创建reducer
仍然通过图书馆的例子进行分析：
store已经有了，但是store这个管理员记不住管理的那么多数据，需要一个小的记录本帮助他（store）管理数据，所以在创建store的时候需要将这个记录本一起传递给他（store），这样这个store才可以知道自己管理的数据
接下来创建这个记录本（Reducer）
在新建的文件夹store下创建reducer.js文件
//reducer存放数据
//reducer的内容需要返回一个函数，这个函数接受两个参数state，action，
//state是整个store存储的数据
const defaultState = {//初始化数据
inputValue:'213',
list:[1,32]
};
//reducer可以接收state，但是绝不能修改state
export default (state = defaultState, action) => {
return state;
}
4、将reducer传递给store
./store/index.js
//store的内容
import { createStore } from 'redux';
//引入reducer
import reducer from './reducer'
const store = createStore(reducer);//创建store，并将reducer传递给store
export default store;//导出store
到此store就创建好了，接下来在组件中可以从store中取数据了
5、组件从store中取数据
./src/TodoList .js组件
import React, { Component } from "react";
import { Input, Button, List } from "antd";//通过antd栈官网引入需要的组件
import 'antd/dist/antd.css';//引入antd栈的样式文件
import store from './store'//引入store
class TodoList extends Component{
constructor(props){
super(props);
this.state = store.getState();//获取store中的数据
}
render() {
return(
<div style={{marginTop:'10px', marginLeft:'10px'}}>
<div >
<Input value={this.state.inputValue} placeholder = 'qq' style = {{width:'300px', marginRight:'10px'}} />{/* 属性placeholder：默认显示的值*/}
<Button type="primary">提交</Button>
</div>
<List
style={{marginTop:'10px', width:'300px'}}
bordered
dataSource={this.state.list}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
</div>
)
}
}
export default TodoList;
以上完成了从store中取数据的功能
四、实现改变store中的数据：
在实现改变store中的数据之前先安装个redux调试工具（插件Redux DevTools），通过该插件可以很方便的对redux进行调试
问题：
解决：在创建store的方法中增加个参数window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION()方可使用调试工具：
./store/index.js
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;
仍以图书馆的例子说明：
假如一个人要去图书馆借书，他要对管理员store说“我要借书”这句话，但是这句话是通过Action（Creators）创建的，首先创建这句话（创建action）：
Action是一个对象的形式
- Type：告诉store要做的事情是什么？
- Value:传过去一个结果
创建好action后，要把这句话传给store，那如何传给store呢？
Store提供了一个方法（dispatch），调用这个方法就可以将action传给store了
当input输入框发生改变的时候，store中对应的值要发生改变！
import React, { Component } from 'react';
import { Input, Button, List } from 'antd';
import store from './store/index';
import 'antd/dist/antd.css';
class TodoList extends Component{
constructor(props){
super(props);
this.state = store.getState();
this.handleValueChange = this.handleValueChange.bind(this)
}
handleValueChange(e){
//告诉store,输入的类型和输入框中的值
const action = {
type:'change_inpue_value',
value:e.target.value
}
//把action传给store， store自动传给reducer
store.dispatch(action);
}
render(){
return(
<div style={{marginTop:'10px', marginLeft:'10px'}}>
<div>
<Input value={this.state.inputValue} placeholder='ww'
style = {{width: '300px', marginRight:'10px'}}
onChange = {this.handleValueChange}/>
<Button type="primary">提交</Button >
</div>
<List
style = {{width: '300px', marginTop:'10px'}}
bordered
dataSource={this.state.list}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
</div>
)
}
}
export default TodoList;
现在已经把action传递给了store。但是这个管理员store不知道应该怎么做，需要去查记录表（reducer），
那么如何去查记录本（reducer）呢？他（stroe）要把当前stroe里的数据和action一起传给记录本（reducer）
很好的一件事情，当store接受到action后，Store会自动的把当前store中存储的数据（旧数据）和接受的action一起传给reducer，有reducer去告诉store要去做什么。
现在reducer就接受到了之前的数据，也拿 到了action这句话，现在就通过reducer来做这件事情，最后将newState返回给了store
export default (state=defaultState,action)=>{ //input
if (action.type==='change_input_value'){
//将之前的state做一次深拷贝，到newState，再对newState进行修改
const newState=JSON.parse(JSON.stringify(state));//简单的深拷贝
newState.inputValue=action.value;
//返回新数据给store，并将store中之前的数据替换为新的数据，
//这样就完成了数据的改变
return newState;
}
}
Store变化了，组件更新：需要在组件上做个处理
组件监听store里面的变化，只要store里面的数据发生改变，则立即执行subscribe函数里的函数
constructor(props){
super(props);
this.state = store.getState();
//监听store里面的变化，只要一变化
//只要store里面的数据发生改变，则立即执行subscribe函数里的函数
store.subscribe(this.handleStoreChange)
this.handleInputValue = this.handleInputValue.bind(this);
}
当store中的数据发生了变化，就会执行函数，从store中重新取一会数据，来跟新state
handleStoreChange=()=>{
this.setState(store.getState());
// console.log('store change')
// 感知store发生变化之后，从store里获取最新的数据，然后进行设置
};
五、actionTypes的拆分
在以上代码中，action的type定义为一个字符串，当这个出现错误时，控制台不会有错误提示，对排错带来给很大的不变，
这样我们把这个type抽取出来，放到一个单独的文件中，定义为常量，当常量在引用的时候，出项错误，控制台就会有错误提示
。即可解决这个问题
定义actionType的常量
src/store/actionType.js：
export const CHANGE_INPUT_VALUE = "change_input_value";
export const ADD_LIST_ITEM = "add_list_item";
在TodoList的组件中引入定义的常量
...
import { CHANGE_INPUT_VALUE, ADD_LIST_ITEM } from "./store/actionType"
...
handleInputValue(e){
const action = {
type : CHANGE_INPUT_VALUE,
value : e.target.value
}
store.dispatch(action);
}
handleBtnClick(){
const action = {
type : ADD_LIST_ITEM
}
store.dispatch(action);
}
...
六、使用actionCreator统一创建action
1、创建actionCreators.js
import { CHANGE_INPUT_VALUE, ADD_LIST_ITEM } from "./actionType"
export const getInputChangeAction = (value) => ({
type : CHANGE_INPUT_VALUE,
value
})
2、组件中使用
...
import { getInputChangeAction } from './store/actionCreators'
...
handleInputValue(e){
const action = getInputChangeAction(e.target.value);
store.dispatch(action);
}
...
七、整体结构优化
1:优化的目标
1.1：action的type由公共的actionTypes管理
const action={
// type:'add_todo_item'
type:ADD_TODO_ITEM
};
1.2：将action封装成对象，写在actionCreator.js文件里
//action封装之前
const action={
// type:'add_todo_item' type:ADD_TODO_ITEM};
// action封装之后
const action=getAddItemActiom();
store.dispatch(action);
export const getAddItemActiom=()=>({
type:ADD_TODO_ITEM,
});
2：目录结构
3.index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
ReactDOM.render(
<TodoList />,
document.getElementById('root')
);
4.TodoList.js
import React ,{Component}from 'react';
import 'antd/dist/antd.css'
import {Input,Button,List} from 'antd'
import store from './store/index';
import {getInputChangeAction,getAddItemActiom,getDeleteItemAction}from './store/actionCreator';//从封装的actionCreator解构出自定义的函数
class TodoList extends Component{
constructor(props){
super(props);
this.state=store.getState();
this.handleInputChange = this.handleInputChange.bind(this);
this.handleBtnClick = this.handleBtnClick.bind(this);
this.handleItemDelet = this.handleItemDelet.bind(this);
//监听store里面的变化，只要一变化
// 只要store里面的数据发生改变，则立即执行subscribe函数里的函数
store.subscribe(this.handleStoreChange)
}
render(){
return(
<div style={{margin:'10px',marginLeft:'10px'}}>
<div>
<Input
value={this.state.inputValue}
placehoder="todo list "
style={{width:'300px'}}
onChange={this.handleInputChange}
/>
<Button
type= "primary"
onClick={this.handleBtnClick}
>提交</Button>
</div>
<List
style={{marginTop:'10px',width:'300px'}}
bordered
dataSource={this.state.list}
renderItem={(item,index) => (<List.Item onClick={this.handleItemDelet.bind(this, index)} >{item}</List.Item>)}//这个这个参考antd官网
/>
</div>
)
}
handleInputChange=(e)=>{
// console.log(e.target.value);
// 获取input的value值
// 告诉store,输入的类型和输入框中的值
// const action={
// // type:'change_input_value',
// type:CHANGE_INPUT_VALUE,//由公共常量代替，防止，字符串不一致
// value: e.target.value,
// };
const action=getInputChangeAction(e.target.value);
//把action传给store , store自动传给reducer
store.dispatch(action);
};
//reducer返回newState之后，store传递newState给组件
handleStoreChange=()=>{
this.setState(store.getState());
// console.log('store change')
// 感知store发生变化之后，从store里获取最新的数据，然后进行设置
};
//提交按钮(又一次流程)
handleBtnClick=()=>{
// //action封装之前
// const action={
// // type:'add_todo_item'
// type:ADD_TODO_ITEM
// };
// action封装之后
const action=getAddItemActiom();
store.dispatch(action);
};
//点击删除
handleItemDelet=(index)=>{
// const action={
// // type:'delete_todo_item',
// type:DELETE_TODO_ITEM,
// index:index,
// };
// action封装之后
const action=getDeleteItemAction(index);
store.dispatch(action);
}
}
export default TodoList;
5.store/index.js
import {createStore} from 'redux';
import reducer from './reducer';
//1-store是唯一的
//2-只有store才能改变自己的内容（state）
//3-reducer必须是纯函数
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
//如果安装了redeux devtools扩展这个工具（谷歌商店里下载），
//则在控制台里使用这个方法（为了调试redux）
);
export default store;
6.store/reducer.js
import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from './actionTypes';//引入常量
const defaultState={
inputValue:'',
list:[]
};
//reducer可以接收state，但是绝不能修改state
// reducer必须是纯函数
// 纯函数：给固定的输入，一定有固定的输出（不能有不固定的日期函数），不会有副作用（改变参数的值）
export default (state=defaultState,action)=>{
//input
if (action.type===CHANGE_INPUT_VALUE){
const newState=JSON.parse(JSON.stringify(state));//简单的深拷贝
newState.inputValue=action.value;
return newState;
}
//button
if (action.type===ADD_TODO_ITEM){
const newState=JSON.parse(JSON.stringify(state));//把老数据拷贝一份
newState.list.push(newState.inputValue);//在列表中新加输入框内容
newState.inputValue='';//点击提交之后，输入框清空
// console.log(newState);
return newState;//返回给store
}
//点击删除
if (action.type===DELETE_TODO_ITEM){
const newState=JSON.parse(JSON.stringify(state));
newState.list.splice(action.index,1);
return newState;
}
return state;
}
7.store/actionTypes.js
export const CHANGE_INPUT_VALUE='change_input_value';
export const ADD_TODO_ITEM='add_todo_item';
export const DELETE_TODO_ITEM='delete_todo_item';
8.store/actionCreator.js
//用actionCreator创建统一的action
import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from './actionTypes';//引入常量
// 为了封装 const action={
// // type:'add_todo_item'
// type:ADD_TODO_ITEM
// };
export const getInputChangeAction=(value)=>({
type:CHANGE_INPUT_VALUE,
value:value,
});
export const getAddItemActiom=()=>({
type:ADD_TODO_ITEM,
});
export const getDeleteItemAction=(index)=>({
type:DELETE_TODO_ITEM,
index:index,
});