redux
redux 是将 Flux 与函数式编程结合一起,用于解决多场景,多交互的一个管理架构,使用的场景:
1.用户的使用方式复杂
2.不同身份的用户有不同的使用方式(比如普通用户和管理员)
3.多个用户之间可以协作
4.与服务器大量交互,或者使用了WebSocket
5.View要从多个来源获取数据
一,
redux 的简单实例
在src下创建store文件夹
index.js
import {createStore} from "redux" //引入redux 也可以在入口文件全局引入
import ruducer from "./reducer" //引入reducer文件 把reducer注入 createStore()中
//redux 提供了一个方法createStore() 用于store的创建
//const store = createStore() //创建一个store
const store = createStore(ruducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
//window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 用于浏览器的redux 插件的使用
export default sotre
actionTypes.js
export const DEL_TOTAL_ITEM = 'del_total_item'; // 删除一条记录
export const CHANGE_TOTAL_ITEM = 'change_total_item'; // 修改一条记录的转态
export const ADD_TOTAL_ITEM = 'add_total_item'; // 添加一条记录
actionCreators.js
import {DEL_TOTAL_ITEM , CHANGE_TOTAL_ITEM , ADD_TOTAL_ITEM } from './actionTypes'
// 1. 删除一条记录
export const getDelItemAction = (todoId)=>({
type: DEL_TOTAL_ITEM ,
totalId
});
// 2. 修改一条记录的状态
export const getChangeItemFinishedAction = (todoId, isFinished)=>({
type: CHANGE_TOTAL_ITEM ,
totalId
});
// 3. 添加一条记录
export const getAddItemAction = (todo)=>({
type: ADD_TOTAL_ITEM ,
todo
});
reducer.js
//初始化 数据参数
const state = {
total:[
{id: 1, title: '学习'},
{id: 2, title: '打台球',},
{id: 3, title: '打游戏'},
{id: 4, title: '睡觉'},
]
}
export default (state, action)=>{
if(action.type === ADD_TOTAL_ITEM ){ //判断是否为添加的type
const newState = JSON.parse(JSON.stringify(state)); //深拷贝
newState.todos.push(action.todo);
return newState;
}
}
当我们要添加一条数据的时候
import React, {Component} from "react";
import store from './../store'; //引入store
class item extends React.Component{
constructor(props){
super(props);
this.state = store.getState()//获取redux 中的数据getState()
this.myInput = React.createRef(); //绑定REF
this._handleStoreChange = this._handleStoreChange.bind(this);//创建一个方法
store.subscribe(this._handleStoreChange);订阅
}
render(){
const { total } = this.state //解构出total
return(
<input
ref={this.myInput}
type="text"
placeholder="请输入"
onKeyDown={(e)=>this._handleEvent(e)}
/>
<ul>
{total.map(item,index)=>(<li>{item.title}</li>)}
</ul>
)
}
_handleEvent(e){
const { total } = this.state //解构出total
const toatalId = total.length == 0 ? 0 : total[total.length -1].id +1;//获取ID
// 1. 判断是否是回车键
if(13 === e.keyCode){
// 2. 判断输入的内容是否为空
if(!this.myInput.current.value){
alert('输入的内容不能为空!');
return;
}
// 3. 创建todo对象返回
const todoId= {id: toatalId, title:this.myInput.current.value};
const action = getAddItemAction(todoId);//创建action 触发定义在actionCreators.js 中的 getAddItemAction() 方法
store.dispatch(action); //store.dispatch()派发action
// 4. 清空内容
this.myInput.current.value = '';
}
}
// 更新状态
_handleStoreChange(){
this.setState(store.getState())
}
}
总结:
// redux 的使用流程 在于Components 通过store.dispatch派发 actionCreators() 把要修改的参数传递 action = actionCreators(参数)
export const getAddItemAction = (todo)=>({
type: ADD_TOTAL_ITEM ,
todo
}); //返回一个对象 action = {//type: ADD_TOTAL_ITEM ,todo}
store.dispatch(action) //传递给了reducers中的方法通过
export default (state, action)=>{ //接收action
if(action.type === ADD_TOTAL_ITEM ){ //判断是否为添加的type
const newState = JSON.parse(JSON.stringify(state)); //深拷贝
newState.todos.push(action.todo);
return newState;
}
//最后在 index.js中挂载reducer文件
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;
Components中更新状态
import React, {Component} from "react";
import store from './../store'; //引入store
class item extends React.Component{
constructor(props){
super(props);
this.state = store.getState()//获取redux 中的数据getState()
this._handleStoreChange = this._handleStoreChange.bind(this);//创建一个方法
store.subscribe(this._handleStoreChange);订阅
}
render(){
const { total } = this.state //解构出total
return(
<input
ref={this.myInput}
type="text"
placeholder="请输入"
onKeyDown={(e)=>this._handleEvent(e)}
/>
<ul>
{total.map(item,index)=>(<li>{item.title}</li>)}
</ul>
)
}
// 更新状态
_handleStoreChange(){
this.setState(store.getState())
}
}