P10:Redux基础-Redux的编程小技巧总结
通过前几篇文章做的ToDoList Demo
,如果你已经能熟练掌握了,说明你 Redux 已经入门了,可以先看个小姐姐跳舞来奖励自己一下了。但是呢你可能是一个已经走上工作岗位的老手,那你这样写 Redux 就稍微有点 low 了,你需要作合理的分离让层次更清晰。本文我们来讲两个 Redux 实际开发中的小技巧。
把 Action Types 单度写入一个文件
写Redux Action
的时候,我们写了很多 Action 的派发,产生了很多Action Types
,如果需要Action
的地方我们就自己命名一个Type
,会出现两个基本问题:
- 这些 Types 如果不统一管理,不利于大型项目的服用,设置会长生冗余代码。
- 因为
Action
里的Type
,一定要和Reducer
里的type
一一对应在,所以这部分代码或字母写错后,浏览器里并没有明确的报错,这给调试带来了极大的困难。
那我在开发中就会把Action Type
单独拆分出一个文件。在src/store
文件夹下面,新建立一个actionTypes.js
文件,然后把 Type 集中放到文件中进行管理。
export const CHANGE_INPUT = 'changeInput' export const ADD_ITEM = 'addItem' export const DELETE_ITEM = 'deleteItem'
引入 Action 中并使用
写好了ationType.js
文件,可以引入到TodoList.js
组件当中,引入代码如下:
import { CHANGE_INPUT , ADD_ITEM , DELETE_ITEM } from './store/actionTypes'
引入后可以在下面的代码中进行使用这些常量代替原来的Type
值了.
changeInputValue(e){ const action ={ type:CHANGE_INPUT, value:e.target.value } store.dispatch(action) } clickBtn(){ const action = { type:ADD_ITEM } store.dispatch(action) } deleteItem(index){ const action = { type:DELETE_ITEM, index} store.dispatch(action) }
引入 Reducer 并进行更改
也是先引入actionType.js
文件,然后把对应的字符串换成常量,整个代码如下:
import {CHANGE_INPUT,ADD_ITEM,DELETE_ITEM} from './actionTypes' const defaultState = { inputValue : 'Write Something', list:[ '工作再忙也要锻炼身体', '中午下班休息一小时' ] } export default (state = defaultState,action)=>{ if(action.type === CHANGE_INPUT){ let newState = JSON.parse(JSON.stringify(state)) //深度拷贝 state newState.inputValue = action.value return newState } //state 值只能传递,不能使用 if(action.type === ADD_ITEM ){ //根据 type 值,编写业务逻辑 let newState = JSON.parse(JSON.stringify(state)) newState.list.push(newState.inputValue) //push 新的内容到列表中去 newState.inputValue = '' return newState } if(action.type === DELETE_ITEM ){ //根据 type 值,编写业务逻辑 let newState = JSON.parse(JSON.stringify(state)) newState.list.splice(action.index,1) //push 新的内容到列表中去 return newState } return state }
这样就完成了分离,那你可能要问,我们又多了一个文件,有什么好处呢?这样分离的好处就是我们的代码实现了复用,比如说增删改查,那查不可能用一次,可能很多地方都会用到,这样我们直接引入文件使用就可以了,可以避免冗余代码。还有就是这样如果我们写错了常量名称,程序会直接在浏览器和控制台报错,可以加快开发效率,减少找错时间。
写到这儿可能小伙伴们也发现了,在ToDoList
组件里有很多 Action,并且分散才程序的各个地方,如果庞大的工程,这势必会造成严重的混乱,所以接下来我们就把所有的Redux Action
放到一个文件里进行管理。
编写 actionCreators.js 文件
在/src/store
文件夹下面,建立一个心的文件actionCreators.js
,先在文件中引入上节课编写actionTypes.js
文件。
import {CHANGE_INPUT} from './actionTypes'
引入后可以用const
声明一个changeInputAction
变量,变量是一个箭头函数,代码如下:
import {CHANGE_INPUT} from './actionTypes' export const changeInputAction = (value)=>({ type:CHANGE_INPUT, value })
修改 todoList 中的代码
有了文件,就可以把actionCreatores.js
引入到TodoLisit
中。
import {changeInputAction} from './store/actionCreatores'
引入后,可以把changeInputValue()
方法,修改为下面的样子。
changeInputValue(e){ const action = changeInputAction(e.target.value) store.dispatch(action) }
然后再浏览器中打开程序,进行测试,也是完全正常的。
修改另两个 Action 方法
安装上面的例子,修改另两个方法,actionCreatores.js
全部代码如下:
import {CHANGE_INPUT , ADD_ITEM,DELETE_ITEM} from './actionTypes' export const changeInputAction = (value)=>({ type:CHANGE_INPUT, value }) export const addItemAction = ()=>({ type:ADD_ITEM }) export const deleteItemAction = (index)=>({ type:DELETE_ITEM, index })
这个文件写完,可以把TodoList.js
文件里的所有 action 都改为直接调用方法的模式。代码如下:
import React, { Component } from 'react'; import 'antd/dist/antd.css' import { Input , Button , List } from 'antd' import store from './store' //关键代码-------------start import {changeInputAction , addItemAction ,deleteItemAction} from './store/actionCreatores' //关键代码------------end class TodoList extends Component { constructor(props){ super(props) this.state=store.getState(); this.changeInputValue= this.changeInputValue.bind(this) this.storeChange = this.storeChange.bind(this) this.clickBtn = this.clickBtn.bind(this) store.subscribe(this.storeChange) //订阅 Redux 的状态 } render() { return ( <div style={{margin:'10px'}}> <div> <Input placeholder={this.state.inputValue} style={{ width:'250px', marginRight:'10px'}} onChange={this.changeInputValue} value={this.state.inputValue} /> <Button type="primary" onClick={this.clickBtn} >增加</Button> </div> <div style={{margin:'10px',width:'300px'}}> <List bordered dataSource={this.state.list} renderItem={(item,index)=>(<List.Item onClick={this.deleteItem.bind(this,index)}>{item}</List.Item>)} /> </div> </div> ); } storeChange(){ console.log('store changed') this.setState(store.getState()) } //--------关键代码------start changeInputValue(e){ const action = changeInputAction(e.target.value) store.dispatch(action) } clickBtn(){ const action = addItemAction() store.dispatch(action) } deleteItem(index){ const action = deleteItemAction(index) store.dispatch(action) } //--------关键代码------end } export default TodoList;
都写完了,我们就可以到浏览器中进行查看了,功能也是完全可以的。
以上就是 Redux 的编程小技巧的总结,我们不仅实现了 Action Types 的分离,同时也实现Redux Action
和业务逻辑的分离,个人觉的这些技巧在你的实际工作中是完全有必要作的,这样可大大提高了你的程序的可维护性。
码云笔记 » P10:Redux基础-Redux的编程小技巧总结