[React]简单实现redux+react

简单实现redux+react

安装：npm install --save redux

redux是所有语言都可以使用的，并不是只有react可以使用
有专门的react-redux
与react的绑定库和开发者工具

npm install --save react-redux
npm install --save-dev redux-devtools

redux的三大原则
一、单一数据源，整个应用的state被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个store中。
二、State 是只读的，唯一改变 state 的方法就是触发action，action 是一个用于描述已发生事件的普通对象。
三、为了描述 action 如何改变 state tree ，你需要编写reducers。

图片：clipboard.png

使用场景
关于redux :如果你的UI层非常简单,没有很多互动, Redux就是不必要的,用了反而增加复杂性，下面描述了需要redux的情景
●用户的使用方式复杂
●不同身份的用户有不同的使用方式(比如普通用户和管理员)
●多个用户之间可以协作
●与服务器大量交互 ,或者使用了WebSocket
●View要从多 个来源获取数据

图片：clipboard1.png

如何简单创建并使用redux
文件目录

|--src
   |--action
     |--Action.js   //ActionCreater  触发事件
     |--ActionType.js   //触发名称
   |--reducers
     |--reducers.js
   |--其他组件

介绍action的使用：
先明白Action的概念：
State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
Action是一个对象，其中type是触发名称，是必须的属性，其他属性可以自由设置。

const action={
    type:'ADD',
    payload:'添加信息'
}

其中Action 的名称是ADD，它携带的信息是字符串'添加信息'。


1.ActionType.js
将触发名称封装在变量中，这样可以防止在后期调用时单词写错

export const  INCREASE='INCREASE_MESSAGE'//添加留言
export const  INITMESSAGE='INIT_MESSAGE'//初始化
export const ADD='ADD_RETURN';//添加回复
export const  INITRETURN='INIT_RETURN'//初始化

2.Action.js可以为一个action创造器
View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。

const ActionType=require('./ActionType');
//Action触发的名称
module.exports={
    Increase(data){
        return {
            type:ActionType.INCREASE,
            //触发名称为INCREASE
            payload:data
            //传输的数据
        }
    }
}

3.reducers.js
Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

import {INCREASE , ADD , INITMESSAGE , INITRETURN} from "../action/ActionType";
//定义初始状态
const initState={
    comment:[],
    returns:[],
}
const changeValue=(state=initState,action)=>{
    //state=initState将初始状态赋值给state
switch(action.type){
    //当action.type的触发名称为INCREASE会将action.data的值和原有的数据进行合并
    case INCREASE:
        return {...state,comment:[...state.comment,action.data]};
        //返回新的state
    case ADD:
        return {...state,returns:[...state.returns,action.data]};
    case INITRETURN:
        return {...state.returns,returns:action.data};
    case INITMESSAGE:
        return {...state.comment,comment:action.data};
    default:return state;
}
}
export default changeValue;

4.在组件中调用方法实现redux state状态的更改：
在页面中我们可以使用store.dispatch来进行触发reducer的自执行，所以在页面中，我们的store需要知道reducer函数，所以需要将Reducer传入createStore

//导入Action名称
import {ADD, INITRETURN} from "../action/ActionType";
//导入reducers
import changeValue from "../reducers/reducers";
import {createStore} from 'redux'
//导入ActionCreater
import {Increase} from './action/Action'
//将reducer函数传入createStore
var store = createStore(changeValue)
//当我们有ActionCreater时，我们可以直接引用
//在Action里面对输数据进行处理变为
//{type:ActionType.INCREASE, payload:data }返回给reducer     
store.dispatch(Increase(obj))
//没有ActionCreater时，把对象传到reducer中，让他自动判断
store.dispatch({type: ADD, data: obj})

5.结合state状态机使用

constructor() {
    //状态机，管理当前组件的数据
    super();
    this.state = {
        commentList: store.getState().comment,
    };
}
addComment(obj) {
    store.dispatch({type: INCREASE, data: obj})
    this.setState({
        commentList: store.getState().comment
    })
}