redux的简单使用

redux的基本使用

store文件夹

• index.js

  // 1. 引入redux的创建store方法 createStore
  import { createStore } from 'redux';
  
  // 2. 引入reducer
  import reducer from 'reducer';
  
  // 3. 使用createStore方法,并传入reducer
  const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // 使用redux谷歌插件
  );
  
  // 4. 讲store暴露出去
  export default store;

• reducer.js

  // 引入actionTypes.js
  import { ACTION_TYPE } from './actionTypes'
  
  // 1. 定义state的默认值
  const defaultState = {
      data: []
  };
  
  // 2. 暴露函数
  export default (state = defaultState, action) => {
   // 4. 通过接收的action参数判断下一步操作
   if(action.type === ACTION_TYPE) {
     // 5. 深拷贝state
     const newState = JSON.parse(JSON.stringify(state));
     
     // 6. 对newState的数据进行修改
     newState.data = action.value;
     
     // 7. 将newState返回
     return newState;
   }
      // 3. 返回state
      return state;
  }

• actionTypes.js

  //统一管理redux的actionde type属性,杜绝代码错误，有利于工程化
  export const ACTION_TYPE = 'action_type;

• actionCreators.js

  // 引入actionTypes.js
  import { ACTION_TYPE } from './actionTypes'
  // action创建器,有利于自动化测试
  export const getAction = (value) => ({
    type: ACTION_TYPE,
    value
  })

Component.js

  import React, { Component } from 'react';
  // 1. 引入store
  import store from './store';
  
  // 2. 引入actionCreators.js中创建action的方法
  import { getAction } from './store/actionCreators';
  
  class App extends Component {
    render(){}
    
    handelGetAction(){
      const value = 'aa';
       
      // 3. 调用action创建方法
      const action = getAction(value);
      
      // 4. 派发action
      store.dispatch(action);
    }
  }