P10:Redux的编程小技巧总结
Posted wgchen~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了P10:Redux的编程小技巧总结相关的知识,希望对你有一定的参考价值。
Redux 基础
阐述
通过前几篇文章做的 ToDoList Demo
,如果你已经能熟练掌握了,说明你Redux已经入门了,可以先看个小姐姐跳舞来奖励自己一下了。
但是呢你可能是一个已经走上工作岗位的老手,那你这样写Redux就稍微有点low了,你需要作合理的分离让层次更清晰。
本文我们来讲两个Redux实际开发中的小技巧。
把Action Types 单独写入一个文件
写Redux Action的时候,我们写了很多Action的派发,产生了很多Action Types,如果需要Action的地方我们就自己命名一个Type,会出现两个基本问题:
1、这些Types如果不统一管理,不利于大型项目的应用,设置会长生冗余代码。
2、因为Action里的Type,一定要和Reducer里的type一一对应在,所以这部分代码或字母写错后,浏览器里并没有明确的报错,这给调试带来了极大的困难。
那么在开发中就会把Action Type单独拆分出一个文件。
在 src/store
文件夹下面,新建立一个 actionTypes.js
文件,然后把Type集中放到文件中进行管理。
export const CHANGE_INPUT = 'change_input_value'
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/actionCreators'
//关键代码------------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的编程小技巧总结的主要内容,如果未能解决你的问题,请参考以下文章