Redux笔记

Redux简介

1、Redux 是一个状态容器

Redux 就像是作者自己的介绍，它不会为你提供任何的东西，它不会告诉你如何做路由，它只专注于应用程序状态，是一个 JavasSript 的状态容器，所有的状态的变化都是当前状态和 Action 共同的作用结果。 对于view来说，不用关心数据是怎样变化，只需要在 view 层面等待 store 通知自己数据发生变化，然后把数据渲染成页面即可。

2、Redux 和 React 之间没有关系

Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。 尽管如此，Redux 还是和 React 和 Deku 这类框架搭配起来用最好，因为这类框架允许你以 state 函数的形式来描述界面，Redux 通过 action 的形式来发起 state 变化。

 

Redux的工作流程图

redux的工作流程图看起来比较复杂，但是换一个例子来进行理解，会感觉还是比较简单的。在网上看到了这样的一篇文章，将Redux的工作流程比喻成图书馆借书那就很容易理解了，具体链接为https://www.jianshu.com/p/d39712ddfb68

 

 

 

具体使用步骤

1.创建个store文件夹，创建个记录本文件reducer.js，用来存放一些数据和行为

let defaultState={
    inputVal:"",
    list:["测试1","测试1","测试1","测试1"],
};
export default (state=defaultState,action)=>{
    if(action.type==="input_change_value"){
        let newState=JSON.parse(JSON.stringify(state));
        newState.inputVal=action.value;
        return newState;
    }else if(action.type==="input_submit_value"){
        let newState=JSON.parse(JSON.stringify(state));
        newState.inputVal="";
        newState.list.push(action.value);
        return newState;        
    }else if(action.type==="input_delete_value"){
        let newState=JSON.parse(JSON.stringify(state));
        newState.list.splice(action.value,1);
        return newState;        
    }
    return state;
}

　

2.　创建个图书管理员store，在store文件夹下创建index.js文件，将创建好的记录本文件引入进去

import {createStore} from 'redux'
import reducer from './reducer'
const store=createStore(reducer);
export default store;

　　

3.现在就可以通过告诉store是什么行为来获取数据或者改变reducer中的数据了

import React,{Component} from "react";
import store from './store/index.js'
class Test extends Component{
    constructor(props){
        super(props);

        //获取reducer中的数据
        this.state=store.getState();
    }
    render(){
        return (
            <div>
              
            </div>
        )
    }
    changeInput(e){
        let action={
            type:"input_change_value",
            value:e.target.value
        }
        store.dispatch(action);
    }
    handleSubmit(){
        let value=this.state.inputVal;
        let action={
            type:"input_submit_value",
            value
        }
        //提交行为告诉store该干什么，store根据reducer中储存的行为进行操作
        store.dispatch(action);        
    }
    delItem(index){
        let value=index;
        let action={
            type:"input_delete_value",
            value
        }
        store.dispatch(action);     
    }
}
export default TodoList;

　　以上为大致使用，但是还是需要优化的地方

提交行为action的时候type是必须要传的，如果我们一不小心将type值拼写错误，控制台是不会报任何错误的，一旦发生这种情况，将给调试带来很大困难。所以一般情况，我们可以将action的Type拆除为一个单独的文件actionTypes.js

export const INPUT_CHANGE_VALUE="input_change_value";
export const INPUT_SUBMIT_VALUE="input_submit_value";
export const INPUT_DELETE_VALUE="input_delete_value";

　　

使用actionCreator统一创建action

之前代码我们把action的创建都放在了组件中，写一些简单的项目确实可以这样做，但是如果是大型项目，就需要将创建action这个动作放入到一个文件进行统一的管理，我们在store文件夹内创建actionCreators.js，代码如下：

import {INPUT_CHANGE_VALUE,INPUT_SUBMIT_VALUE,INPUT_DELETE_VALUE} from "./actionTypes.js"
export let getChangeValueAction=(value)=>{
    return {
        type:INPUT_CHANGE_VALUE,
        value,
    }
}
export let getSubmitValueAction=(value)=>{
    return {
        type:INPUT_SUBMIT_VALUE,
        value,
    }
}
export let getDeleteValueAction=(value)=>{
    return {
        type:INPUT_DELETE_VALUE,
        value,
    }
}

　　

使用方法,在需要用到的组件中引入，调用

import {getChangeValueAction,getSubmitValueAction,getDeleteValueAction} from "./store/actionCreators.js"
.
.
.
.
.
.
.
 changeInput(e){
        let action=getChangeValueAction(e.target.value);
        store.dispatch(action);
  }