react如何拆分actionCreate和actionType

最新推荐文章于 2025-06-06 09:20:16 发布

mini74

最新推荐文章于 2025-06-06 09:20:16 发布

阅读量729

点赞数

CC 4.0 BY-SA版权

文章标签： react

本文链接：https://blog.youkuaiyun.com/mini74/article/details/104961179

本文详细介绍了如何在Redux中创建和使用action types与action creators，通过具体的示例代码，展示了如何定义常量、创建方法以及如何在组件中使用这些action来更新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在store文件夹下创建actionCreate.js（用于放type类型）和actionTypes.js（用于将type的值变为常量）的文件。
在actionTypes.js中创建需要使用的常量，并且export出去。

//这里需要加header是因为这个store在header这个文件夹下，所以要加上这个路径
export const SEARCHER_FOCUS = './header/SEARCHER_FOCUS';
export const SEARCHER_BLUR = './header/SEARCHER_BLUR';

在actionCreate.js中创建对应的方法，来表示不同的type值，并且export出去。

//因为需要使用actionTypes里面的值，所以需要引入，如果不引入会报undefined的错误
import * as actionTypes from './actionTypes';
export const searchFocus = () => {
    return{
        type:actionTypes.SEARCHER_FOCUS
    }
};
export const searchBlur = () => {
    return{
        type:actionTypes.SEARCHER_BLUR
    }
};

在store的index.js中可以将actionCreate.js和actionTypes.js引入，这样在需要使用的时候直接引入store中的index即可，就不需要单独去引入store文件夹下的各个文件了。（将index作为store的一个出口文件，这样更加的方便）

import reducer from './reducer';
import * as actionCreators from './actionCreators'
import * as actionTypes from './actionTypes'
export {reducer,actionCreators,actionTypes}

然后记得在reducer.js中写上你需要store帮你改变什么的逻辑代码哦！

import * as actionTypes from "./actionTypes";

const defaultState = {
    focus: false
};

export default (state = defaultState,action) => {
    if(action.type === actionTypes.SEARCHER_FOCUS){
        return {
            focus: true
        }
    }
    if(action.type === actionTypes.SEARCHER_BLUR){
        return {
            focus: false
        }
    }
    return state
}

最后一步啦！！在需要使用的组件引入store下的index，在mapDispatchToProps使用dispatch派发action给store就完成啦！

//这里就可以直接引入store下的index了，不需要去找到store下的actionCreators
import { actionCreators }  from './store'
const mapDispatchToProps = (dispatch) =>{
    return{
        handleInputFocus () {
            dispatch(actionCreators.searchFocus());
        },
        handleInputBlur () {
            dispatch(actionCreators.searchBlur());
        }
    }
}