redux学习

redux学习

---

redux在实际开发和学习中使用比较多，主要体现在几个方面：

• 保证了数据的唯一来源 在当前工程下有且只有一个store来存储数据，所有的组件都共用这一个store，便于管理【如果没有好好的对数据进行分层管理，也会导致数据存储起来异常麻烦，到后面你就无法知道每个所代表的意思，所有一定要精简数据】。

• store中的数据只能读，不能直接修改 在redux中，如果需要改变store中的数据，只能老实的派发一个action来改变数据，不能直接修改store中的数据

• 修改数据和存储数据分离 在修改数据的时候使用纯函数，只负责修改数据，并不负责数据的存储，至于存储，则是计算之后返回store来存储。

总结：由于是刚上手redux，对于redux感觉很清晰，最主要是将状态进行了分解，耦合性降低。用户改变状态，根据动作作出相应的修改，存储最新的数据，分工很明确。不过也有一个我觉得比较不理解的地方，只有一个store来存储数据，对于小型的需求肯定是可以的，大的需求就有点坑了。

---

redux-demo

来来来，上代码！！！就按照自己的理解顺序，一步一步，需要什么添加什么。在实践之前需要把准备工作做到位。需要一个React项目供我们测试。我使用的是creat-react-app这个工具来创建的。

1. 首先我们需要创建一个store来存储我们的数据

   import { createStore } from 'redux';//引入穿创建store的方法
   import reducer from './reducer';//引入reducer，主要来改变store保存的数据
   //默认值
   var initValues = {
   'count': 100,
   'name': 'haha'
   };
   /**
   创建store
   reduce：reduce对象
   defaultValue：初始化数据，和后面存储数据的
   initValues也可以是一个空的{}，这是初始赋值
   */
   const store = createStore(reducer, initValues);

2. 在上面的代码中我们创建一个Store对象需要一个reducer文件，那么下面就去创建一个reducer文件

   /**
   * 用来改变store中的数据的逻辑处理文件
   * 需要配合action的type来处理逻辑，根据传递过来的action类型进行不同的处理
   */
   
   import * as actionType from './actionType';//引入的所有的actionType，用来和传递过来的action中的type比对然后处理对应的逻辑
   
   /**
   * 需要两个参数，一个是当前store中存储的state，以及动作派发的action
   */
   export default (state, action) => {
   const { count } = action;//action中存储的数据
   
   //和actionType中的类型比对，不同的类型处理不同的逻辑
   switch(action.type) {
       case actionType.INSERT: {
           //处理逻辑
           console.log('stt', state);
           state.count = count;
           return state;
       }
       default:
           return state;
   }
   }

3. 下面就是创建action，Action的作用就是返回一个状态需要改变的类型以及需要改变的数据，reducer接收到这个Action后通过类型匹配执行对应的逻辑，改变action存储的数据

 import * as actionType from './actionType';//这里面存储的是动作的类型，也就是需要怎么改变数据的方式

/**
 不同的action返回不同的type和需要改变的数据
 */
export const insert = (count) => {
    return {
        type: actionType.INSERT,//返回的类型，根据类型来判断
        count: count//需要改变的数据
    }
}

1. 在组件中使用体现

 import React, { Component } from 'react';
import store from '../Redux/store';//引入store以便存储数据
import * as Actions from '../Redux/action';//引入action

class Panel extends Component {
constructor(props) {
        super(props);

        this.state = {
            count: 0,
            name: ''
        };
        this.handleStoreData = this.handleStoreData.bind(this);
        this.updateState = this.updateState.bind(this);
        console.log('getStore', store.getState());
    }

     /**
     * 获取store中的数据
     */
    handleStoreData() {
        let storeData = store.getState();
        return storeData;
    }
    componentDidMount() {
        //监听Store中的数据变化，用来改变数据刷新
        store.subscribe(this.updateState);
    }
    updateState() {
        this.setState(this.handleStoreData());
    }
    handleClick() {
        /**
         * 派发一个Action去改变Store中的数据，也是唯一的途径才能改变Store中的数据
         * 改变之后store中数据变化则会触发注册的updateState函数来更新
         */
        store.dispatch(Actions.insert(this.state.count + 1));
    }
    render() {
        console.log('111', store.getState());
        return (
            <div>
                <p onClick={this.handleClick.bind(this)}>Count:{this.state.count}</p>
            </div>
        );
    }
}

结束