关于react redux状态管理的用法 的基础用法

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())
  }
}