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