八十五、store数据,actionCreators 与 constants 的拆分和redux-immutable的使用

2020/11/22、 周日、今天又是奋斗的一天。

@Author:Runsen

你是否将所有 JavaScript 脚本放在一个大文件中,并在所有页面上使用这个文件?如果是这样,你可能需要考虑使用代码拆分!

代码拆分

我们将变量的类型拆分到constants.js


constants.js

export const SERACH_FOCUS = 'header/SERACH_FOCUS'
export const SERACH_BLUR = 'header/SERACH_BLUR'

注意所有的变量类型都必须要export 导出。

actionCreators 本身是一个函数,同样需要export出来。主要用在mapDispathToProps中的dispatch。

actionCreators.js

import * as constants  from './constants'

export const searchFocus = () =>({
  type: constants.SERACH_FOCUS
})

export const searchBlur = () =>({
  type: constants.SERACH_BLUR
})

上面就完成了对actionCreators 与 constants 的拆分。

由于header/index.js需要导入reducer,constants,actionCreators

因此,需要在store中的index.js将reducer,constants,actionCreators导出。

redux-immutable

在header的reducer.js里把header变成immutable对象之后,在组件里获取focused属性就得这样获取:focused:state.header.get('focused')

immutable好处。

1. 保证不可变(每次通过Immutable.js操作的对象都会返回一个新的对象)  
2. 丰富的API  
3. 性能好 (通过字典树对数据结构的共享)

安装:npm install redux-immutable --save

主要使用的是fromJS

import * as constants  from './constants'
import {fromJS} from 'immutable'

const defaultState =  fromJS({
  focused: false
});


export default (state = defaultState, action) => {
  if (action.type === constants.SERACH_FOCUS) {
    return state.set('focused',true)
  }
  if (action.type === constants.SERACH_BLUR) {
    return state.set('focused',false)
  }

  return state;
}

store的数据储存是来自header/store/reducer.js

刘润森! CSDN认证博客专家 Python Java 前端
17年就读于东莞XX学院化学工程与工艺专业,GitChat作者。Runsen的微信公众号是"Python之王",因为Python入了IT的坑,从此不能自拔。公众号内容涉及Python,Java计算机、杂谈。干货与情怀同在。喜欢的微信搜索:「Python之王」。个人微信号:RunsenLiu。不关注我公号一律拉黑!!!
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页
实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值