Redux 知识总结
Redux知识总结
内容大纲：
1、什么是 rudux
2、配置 redux
3、案例分享
1、Redux 概念
1.1、什么是redux
Redux 是针对 JavaScript应用的可预测状态容器 就是用来管理数据的。
stroe 保存数据
action领导 下达命令
reducer员工 执行命令
2、配置 redux
2.1、安装redux
下载命令：
npm install redux --save
2.2、创建redux文件夹 创建js文件夹
（1）index.js reducer.js action.js actionType.js
（2）在redux文件下下导入的redux是 redux 在外部就是react-redux
（3）在index.js根目录文件导入redux文件夹下创建的index文件导出的store
（4）在index.js根目录导入Provider包裹APP.js文件 在标签内导入store
2.3、在redux文件夹中的index.js内部从redux中导出createStore和combineReducers
（1）定义初始化的reducer对象rootReducer 所有reducer中导出的reducer全都定义在这个对象中
（2）定义初始化的state的格式为对象initialState
（3）再通过createStore把两个初始的值合并到对象store中并导出，在根目录的index中使用
2.4、在reducer文件中导入从actionType中导出定义的action的type
（1）定义一个对象，对象内部的值设置一个初始的空
（2）定义一个函数导出 这个函数的两个参数一个是state一个是action
（3）state设置初始等于上面定义的初始化对象 action是用户提交的请求
（4）用switch方法判断actionType名返回对应的action中的数据（用户提交的数据）
2.5、创建action的创建函数
（1）定义函数 export导出 return返回两个对象 一个是type类型 一个是传递的数据
2.6、组件中使用
（1）在action中导出每一个定义好的对象 在组件中导入
（2）引入react的connect方法
（3）在组件下面定义一个获取数据的方法mapStateToProps 参数是state，返回的是一个对象，对象内是需要获取的数据
（4）再定义一个导出数据的方法mapActionToProps 参数为dispatch，return返回一个函数 函数的value值是一个箭头函数
dispatch参数提交定义的action，action的参数再调用的地方定义。
（5）导出时候用connect方法连接获取数据和导出数据的函数，第二个括号传入请求数据的组件
2.7、实现无关系组件的传值
1、安装redux，npm i redux
2、创建商店（store）
实例化商店对象、创建商店订单账单（属性清单）
3、操作
把值交给商店
去商店取值 store.getState() ,先监听一下store中的改变 react-redux
重要概念：
1、理解store（自建商店），用于统一管理项目中的所有需要共享的属性和数据
createStore()
2、理解reducer，商店中的清单，state用于存储数据，action判断数据的来源并接收数据，返回state
createStore(reducer)
3、理解组件中的store（组件中引入的商店）, import store from ‘./sotre’
获取数据 store.getState()
提交数据给store store.dispatch(action) , action是要存储的对象，属性：type表示action的类型,value表示要保存的值
实时监听store中数据的改变 store.subscribe(function)
2、配置Redux
配置Redux开发环境的最快方法是使用create-react-app工具。在开始之前，确保已经安装并更新了nodejs，npm。
npm install redux
创建store目录，在store目录下新建index.js文件，键入以下内容：
import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
在store目录下创建reducer.js文件，键入以下内容：
const defaultState = {
inputValue:'',
list:[]
}
//reducer可以接收state，但是不能修改state
export default (state = defaultState,action) => {
return state;
}
在组件中就可以使用store的数据
import React,{Component} from 'react';
import store from './store/index';
class TodoList extends Component{
constructor(props){
super(props);
this.state = store.getState();
this.handleStoreChange = this.handleStoreChange.bind(this);
store.subscribe(this.handleStoreChange);
}
handleStoreChange(){
this.setState(store.getState());
}
render(){
return (
<div>
<input type='text' value={this.state.inputValue}/>
<button onClick={this.handleClick}>提交</button>
<ul>
{this.state.list.map((item,index)=>{
return (
<li key={index}>{item}</li>
);
})}
</ul>
</div>
);
}
}
export default TodoList;
3、案例分享
TodoList案例
TodoList.js
import React,{Component} from 'react';
import store from './store/index';
import {DELETE_TODO_ITEM,CHANGE_INPUT_VALUE,ADD_TODO_ITEM} from './store/actionType'
class TodoList extends Component{
constructor(props){
super(props);
this.state = store.getState();
this.handleChange = this.handleChange.bind(this);
this.handleStoreChange = this.handleStoreChange.bind(this);
this.handleClick = this.handleClick.bind(this);
store.subscribe(this.handleStoreChange);
}
handleChange(e){
const action = {
type:CHANGE_INPUT_VALUE,
value:e.target.value
}
store.dispatch(action);
}
handleStoreChange(){
this.setState(store.getState());
}
handleClick(){
const action = {
type:ADD_TODO_ITEM
}
store.dispatch(action);
}
handleClickItem(index){
const action = {
type:DELETE_TODO_ITEM,
index:index
}
store.dispatch(action);
}
render(){
return (
<div>
<input type='text' value={this.state.inputValue} onChange={this.handleChange} />
<button onClick={this.handleClick}>提交</button>
<ul>
{this.state.list.map((item,index)=>{
return (
<li key={index} onClick={this.handleClickItem.bind(this,index)}>{item}</li>
);
})}
</ul>
</div>
);
}
}
export default TodoList;
store/index.js
import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
store/reducer.js
import {DELETE_TODO_ITEM,CHANGE_INPUT_VALUE,ADD_TODO_ITEM} from './actionType'
const defaultState = {
inputValue:'',
list:[]
}
//reducer可以接收state，但是不能修改state
export default (state = defaultState,action) => {
console.log(state,action);
if(action.type === CHANGE_INPUT_VALUE){
const newState = state;
newState.inputValue = action.value;
return newState;
}
if(action.type === ADD_TODO_ITEM){
const newState = state;
newState.list.push(newState.inputValue);
newState.inputValue = '';
return newState;
}
if(action.type === DELETE_TODO_ITEM){
const newState = state;
newState.list.splice(action.index,1);
return newState;
}
return state;
}
store/actionType.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'
参考文章： https://segmentfault.com/a/1190000011474522
核心API：
- createStore 创建store
- store.dispatch 派发action
- store.getState 获取store中所有的数据内容
- store.subscribe 监听store的改变