P10:Redux的编程小技巧总结

浅浅的花香味﹌ 2023-10-06 20:54 54阅读 0赞

#### Redux 基础 ####

*  阐述
 *  把Action Types 单独写入一个文件
 *   *  引入Action中并使用
     *  引入Reducer并进行更改
 *  编写 actionCreators.js文件
 *  修改 todoList 中的代码
 *  修改另两个Action方法

## 阐述 ##

通过前几篇文章做的 `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)
    }

然后再浏览器中打开程序，进行测试，也是完全正常的。

![在这里插入图片描述][74e0baad883043b2a8dee8fd791e04c3.gif_pic_center]

## 修改另两个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和业务逻辑的分离，个人觉的这些技巧在你的实际工作中是完全有必要作的，这样可大大提高了你的程序的可维护性。

[74e0baad883043b2a8dee8fd791e04c3.gif_pic_center]: https://img-blog.csdnimg.cn/74e0baad883043b2a8dee8fd791e04c3.gif#pic_center