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 導(dǎo)出。

actionCreators 本身是一個函數(shù)，同樣需要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需要導(dǎo)入reducer,constants,actionCreators

因此，需要在store中的index.js將reducer,constants,actionCreators導(dǎo)出。

redux-immutable

在header的reducer.js里把header變成immutable對象之后，在組件里獲取focused屬性就得這樣獲取：focused:state.header.get('focused')

immutable好處。

1. 保證不可變（每次通過Immutable.js操作的對象都會返回一個新的對象） 2. 豐富的API 3. 性能好 （通過字典樹對數(shù)據(jù)結(jié)構(gòu)的共享）

安裝：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的數(shù)據(jù)儲存是來自header/store/reducer.js

總結(jié)

以上是生活随笔為你收集整理的八十五、store数据，actionCreators 与 constants 的拆分和redux-immutable的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。