使用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;