使用redux-actions库编写redux

使用redux-actions库编写redux

1.因为需要使用到@装饰器，所以需要在babel内添加配置。

• 首先，先执行如下指令

npm run eject

执行该指令会生成config文件夹以及在package.json文件内生成一些配置项

• 在package.json文件内找到 babel项（一般在最后）
  
  添加上图所示的 plugins项即可。

"plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]

2.开始使用redux-actions库编写redux

• 先下载一些依赖

npm install  redux-actions  --save-dev   //安装redux-actions
npm install redux  --save-dev   //安装redux
npm install react-redux   --save-dev //安装 react-redux 

• 项目大致目录
  

• todoList.js文件编写 (任意模块的store)

import  { handleActions } from 'redux-actions';  //导入react-actions 库的 handleActions 模块

//handleActions 方法会返回一个值     默认是原路返回  (返回传入的值)   也就是第二个参数
//只有传入 export （导出的） handleActions方法内的 state值才能被共享出去
//状态值存储于此
let count=0;
let items=[];
let item={};


//改变状态值的动作函数
export  const Items=handleActions({
	'ADD_ITEM'(state,action){
		console.log(action.payload);
		return [
			...state,
			action.payload.item      //传入的参数都存储在 action载体的 payload 里面 
		]
	}
},items)

export const Count=handleActions({
	'ADD_COUNT'(state,action){
		return count++;
	}
},count)

• ./reducer/index.js 文件的编写 ：只要是当项目很大时一般都会把redux分模块，而这个文件就是将所有模块的store结合到一个对象内导出。

import { combineReducers } from 'redux'  //导入  结合所有 模块store 的方法

import * as todoList from './todoList'   //导入某模块的 store     import * as xxx from xxx    是将xxx文件内的所有内容整合到一个 名为xxx的对象 导出

const reducer=combineReducers({
	...todoList,
})

export default reducer;  //导出结合之后的 store

• ./actions/actions.js 文件：创建动作，用于匹配传入的type属性值从而执行相应的handleActions内的函数

import {createAction} from 'redux-actions'; //导入 创建动作模块 用于匹配类型进行相应的操作

export const addCount=createAction('ADD_COUNT');

export const addItem=createAction('ADD_ITEM');

• 项目入口文件的编写 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import reducer from './redux/reducer/index'; //导入结合之后的 store
import {createStore} from 'redux';  //导入创建 store的方法
import {Provider} from 'react-redux'; //导入 Provider 高阶组件 用于将 store内的内容 分支到所有的子组件内  props内        所有的子组件通过this.props.xxx   即可访问store内的状态值      

let Store=createStore(reducer);


ReactDOM.render(
	<Provider store={Store} >
		<App />
	</Provider>,
	document.getElementById('root')
	);

• 如何使用

import React, { Component } from 'react';
import './App.css';
import { connect } from 'react-redux'; //导入装饰器
import {addItem,addCount} from './redux/actions/actions'; //导入actions 内的
//连接器   用于连接redux  @为装饰器
@connect( 
    (state) => ({ 
        items:state.Items,
        count:state.Count,
        item:state.item   //由于这个变量并未在redux内传入导出的handleActions方法内所以这个item值为undefined
    })
)


class App extends Component {  
	
	addItem= (obj)=>{
		this.props.dispatch(addItem({
			item:obj,
			type:'ADD_ITEM',
		}))
	}
	
	addCount= ()=>{
		this.props.dispatch(addCount({    
			type:'ADD_COUNT'
		}))
	}
	
  render() {
  	const {count,items}=this.props;
  	let obj={
  		id:0,
  		name:'张三',
  		age:15
  	}
    return (
      <div className="App">
        <h2>redux-actions 库的使用测试</h2>
        <p>数量:{count}</p>
        <button onClick={()=>{this.addCount();}}>点击增加count的值</button>
        <button onClick={()=>{this.addItem(obj)}} >添加数据</button>
        <ul>
        	{
        		items.map((item,index)=>{
        			return (<li key={index}>姓名:{item.name}   年龄:{item.age}</li>)
        		})
        	}
        </ul>
      </div>
    );
  }
}

export default App;