react-redux配合immutable的基本使用

首先需要安装 redux 和 react-redux 还有 immutable

npm i redux react-redux immutable --save

1. 创建 createStore，这里使用了 redux-thunk 处理 ajax请求，composeEnhancers 是配置页面中的redux插件的显示，借助 applyMiddleware 进行 redux-thunk 与 插件配置整合，具体的用法可以看这里https://github.com/zalmoxisus/redux-devtools-extension

store.js

import {
   createStore, compose, applyMiddleware} from 'redux'
import ReduxThunk from 'redux-thunk'
import reducer from './reducer'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const enhancer = composeEnhancers(applyMiddleware(ReduxThunk))
const store = createStore(reducer, enhancer)

export default store

2. 创建 reducer ，这里使用了 reducer 的拆分，然后使用 combineReducers 函数进行 immutable 管理，需要安装 redux-immutable

import {
   combineReducers} from 'redux-immutable'
import headerReducer from '../common/header/store/reducer'
import homeReducer from '../pages/home/store/reducer'

// 直接把 combineReducers 下面的所有属性都变成了 immutable
export default combineReducers({
   
    header: headerReducer,
    home: homeReducer
})

reducer 引入的两个子 reducer，因为使用了 immutable，所以更新数据需要用 set

headerReducer

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

const defaultState = fromJS({
   
    focused: false,
    list: [],
    page: 1