从零开始react--02(redux)

最新推荐文章于 2026-06-18 21:05:44 发布

原创最新推荐文章于 2026-06-18 21:05:44 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#reactjs #前端 #前端框架

本文详细讲解了如何在Redux中创建actionType文件以提升action命名规范，并介绍了actionCreator的使用，以增强代码组织和测试。重点讨论了如何确保action对象的正确构造，以及纯函数reducer的正确应用。

redux的继续完善

actionType文件的创建

在函数中的action的type:"字符串"如果写错，并不会报错且不易察觉
actionType旨在使action的名字分离出来

store中创建actionType.js文件

export const CHANGE_INPUT_VALUE = "change_input_value";
export const ADD_TODO_ITEM = "add_todo_item";
export const DELETE_TODO_ITEM = "delete_todo_item";

在todolist组件中引入并使用

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from "./store/actionType"
handleInputChange(e) {
        const action = {
            type: CHANGE_INPUT_VALUE,
            value: e.target.value
        }
        store.dispatch(action);
    }

在reducer.js中引入并使用

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from "./actionType"
const defaultState = {
    inputValue: "",
    list:[]
};
export default (state = defaultState, action) => {/* 局 部 代 码 */
    if (action.type == CHANGE_INPUT_VALUE) {
        //reducer可以接受state，但不能修改state
        //必须对state做一个深复制(互不相干扰)，避免对原state干扰
        let newState = { ...state };
        newState.inputValue = action.value;
        return newState;
    }

整合所有action，使用actionCreator管理所有action

好处是方便管理，另一个是便于前端自动化测试。

创建actionCreator

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from "./actionType"
export const getInputValue = (value) => ({
    type: CHANGE_INPUT_VALUE,
    value
})/*({}),不加这个()会报错 */
/*//加括号的函数体返回对象字面量表达式 */
export const buttounAdd = () => ({
    type: ADD_TODO_ITEM
})
export const getDeleteValue = (index) => ({
    type: DELETE_TODO_ITEM,
    index
})
/*这里的对象表达式必须与reducer内的对象属性一致，不能改属性名，否则会有隐形的错误不易察觉 */
/*export const getDeleteValue = (i) => ({
    type: DELETE_TODO_ITEM,
    i
})*/     这里就是个错的例子，不会报错，但功能异常了。原来叫index,这里就必须还叫index
/*这里的对象表达式必须与reducer内的对象属性一致，不能改属性名，否则会有隐形的错误不易察觉 */

这里有个我的盲点，箭头函数返回体如果用()包围，则返回对象字面量表达式
//加括号的函数体返回对象字面量表达式：params => ({foo: bar})

Todolist中引入并使用

import { getInputValue, buttounAdd, getDeleteValue } from "./store/
。。。
   handleInputChange(e) {
        const action = getInputValue(e.target.value);//这里调用了该函数
        store.dispatch(action);
        // this.setState(store.getState());
    }