actionCreators 与 constants 的拆分

最新推荐文章于 2024-01-02 19:32:20 发布

原创最新推荐文章于 2024-01-02 19:32:20 发布 · 426 阅读

0 ·

CC 4.0 BY-SA版权

一个react简单项目专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何在Redux中拆分header模块的状态管理和操作，包括定义初始状态、创建action、使用常量替代硬编码，并通过Header组件实现搜索框聚焦与失焦功能。

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

下面我们继续对 redux reducer 中的数据进行拆分。

我们打开src/common/header/store 下的reducer.js

const defaultState = {
    focused: false
};

export default (state = defaultState, action) => {
    if (action.type === "search_focus") {
        let newState = JSON.parse(JSON.stringify(state));
        newState.focused = true;
        return newState;
    }
    if (action.type === "search_blur") {
        let newState = JSON.parse(JSON.stringify(state));
        newState.focused = false;
        return newState;
    }
    return state;
}

这部分，我们把action 的类型定义为常量，action 的定义也进行统一的调整。

首先，我们在src/common/header/store 下创建文件 actionCreators.js，在这个文件里，我们统一定义action，如下。

export const searchFocus = () => ({
    type: "search_focus"
});

export const searchBlur = () => ({
    type: "search_blur"
});

定义好了后，我们修改Header 组件代码 src/common/header下的index.js ，如下。

import React from 'react';
import {connect} from 'react-redux';
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
  SearchWrapper
} from './style';
import '../../statics/iconfont/iconfont.css';
import { CSSTransition } from 'react-transition-group';
import * as actionCreators from './store/actionCreators';

const Header = (props) => {
  return (
    <HeaderWrapper>
      <Logo href='/'/>
      <Nav>
        <NavItem className='left active'>首页</NavItem>
        <NavItem className='left'>下载</NavItem>
        <NavItem className='right'>登录</NavItem>
        <NavItem className='right'>
          <span className="iconfont">&#xe636;</span>
        </NavItem>
        <SearchWrapper>
          <CSSTransition
            in={props.focused}
            timeout={200}
            classNames="slide"
          >
            <NavSearch
              placeholder="搜索"
              className={props.focused ? "focused" : ""}
              onFocus={props.handleFocus}
              onBlur={props.handleBlur}
            ></NavSearch>
          </CSSTransition>
          <span
            className={props.focused ? "focused iconfont" : "iconfont"}
          >&#xe623;</span>
        </SearchWrapper>
      </Nav>
      <Addition>
      <Button className='writting'>
        <span className="iconfont">&#xe63a;</span>
        写文章
      </Button>
        <Button className='reg'>注册</Button>
      </Addition>
    </HeaderWrapper>
  )
}

const mapStateToProps = (state) => {
  return {
    focused: state.header.focused
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleFocus () {
      dispatch(actionCreators.searchFocus());
    },
    handleBlur () {
      dispatch(actionCreators.searchBlur());
    }

  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);

好的，接下来，action 的type ，我们应该用常量替换。我们在 src/common/header/store 目录下，再创建一个文件 actionType.js 。这个文件的代码如下。

export const SEARCH_FOCUS = "header/search_focus";
export const SEARCH_BLUR = "header/search_blur";

然后呢，我们改一下src/common/header/store 下的actionCreator.js 文件如下。

import * as actionTypes from './actionTypes';

export const searchFocus = () => ({
    type: actionTypes.SEARCH_FOCUS
});

export const searchBlur = () => ({
    type: actionTypes.SEARCH_BLUR
});

然后，再改一个header 中的reducer （src/common/header/store）

import { SEARCH_FOCUS, SEARCH_BLUR } from './actionTypes';

const defaultState = {
    focused: false
};

export default (state = defaultState, action) => {
    if (action.type === SEARCH_FOCUS) {
        let newState = JSON.parse(JSON.stringify(state));
        newState.focused = true;
        return newState;
    }
    if (action.type === SEARCH_BLUR) {
        let newState = JSON.parse(JSON.stringify(state));
        newState.focused = false;
        return newState;
    }
    return state;
}

这样子就可以啦。

最后，我们希望store 目录中，暴露出去的都是从index.js 中暴露出去的，这样引用的时候就比较好引用了。可以做如下修改。

下面是src/common/header/store 下的index.js 文件。

import reducer from './reducer';
import * as actionCreators from './actionCreators';
import * as actionTypes from './actionTypes';

export { reducer, actionCreators, actionTypes };

Done.