React状态管理--Redux

# 在store.js 中
import { createStore } from 'redux'
import reducers from './reducer'
export default createStore(reducers)
# 在reducers.js 中
const initState = {
  list: [],
  placeHolder: 'hello world'
}
export default (state = initState, action) => {
  return state
}

import React, { Component } from 'react'
import store from './store'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      ...store.getState()
    }
  }
  render() {
    return <div>{this.state.placeHolder}</div>
  }
}
// 这里不推荐使用把 store 完全覆盖this.state

// 在action.js 中
import { ADD_TODO, CHANGE_TODO } from './actionTypes'
// 这种方法返回action 的方式成文 actioncreater
export const addTodo = todo => {
  return {
    type: ADD_TODO,
    payload: { todo }
  }
}
export const changeTodo = value => {
  return {
    type: CHANGE_TODO,
    payload: { value }
  }
}

store.dispatch(addTodo(value))

store.subscribe(this.storeChange) //订阅
storeChange = () => {
  //获取state的公共参数  也就是每次获取新的都会被订阅到store
  this.setState(store.getState())
}

import {combineReducers} from 'redux'
import 具体的reducer from './对应的reducer文件'
export default combineReducers（{
    // 把多个reducer 当作combineReducers的对象参数传入即可
    ...reducers
}）
//把reducers  给store 使用

// 在 store.js 中引入中间件
// 引入applyMiddleware 应用中间件
import { createStore, applyMiddleware } from 'redux'
// 引入中间件
import thunk from 'redux-thunk'
import rootReducer from './reducers'
//穿件STore
export default createStore(rootReducer, applyMiddleware(thunk))

// 传入TOdo参数  之后 会得到dispatch 然后通过手动dispatch  即可异步执行
export const asyncAddTodo = todos => dispatch => {
  setTimeout(() => {
    dispatch(addTodo(todos))
  }, 2000)
}

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'
const composeEnhancers =
  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // 其他的扩展选项  name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose

const enhancer = composeEnhancers(
  applyMiddleware(...middleware)
  // 其他的 增强 这样可以使用多个中间件
)
const store = createStore(reducer, enhancer)

// createStore 是用来创建store 的方法
import { createStore } from 'redux'
//引入 合并后的reducer
import rootReducer from './reducers'
//createStore 第一个参数一个是一个 reducer ，如果是多个 在reducer 目录下使用 combineReducers 合并导出
export default createStore(rootReducer)

# 在 reducers 项目下 index.js文件中
//在实际的项目中 由于只有单一的store 但是状态会有很多 所以需要对reducer进行划分
// 而 createStore的参数又指接受一个reducer 所以 redux 使用 combineReducers 合并
//多个reducer 继续引入 使用 combineReducers合并导出
import {combineReducers} from 'redux'
import 具体的reducer from './对应的reducer文件'
export default combineReducers（{
    // 把多个reducer 当作combineReducers的对象参数传入即可
    ...reducers
}）

# 在 reducers 项目下 cart.js文件中 ，在此文件中定义初始化的state状态 和 具体action修改动作
//actionType 是action状态 把状态统一管理
import actionType from '../actions/actionType'
//这是一个初始化的状态
const initState =[{
    id:1,
    context:'todo somethings',
    componented:'false'
}]
//创建reducer 这是一个纯函数 reducer 固定写法是
//两个参数  第一个就是state 必须又一个初始值 第二个是action

export default (state=initState,action)=>{
    // 根据不同的actionType 做不同的处理
    //每次返回一个新的state
    switch(action,type){
        case actionType.TODO_ADD:
            return //TOdo sh
            // 默认 不做任何处理  必须有这一行
        default ：return state
    }
}

import React,{Component} from 'react'
import {connect} from 'redux-react'
//导入actionCreater
import {addTodo,changeTodo} from '../../todo.js'

class TodoList extends Component {
    render(){
        return (
        )
    }
}
//mapStateToprops 这里的state 实际上就是store.getState()的值
const mapState=（state）=>{
    return {//这里return了什么在 this.props 中就可以获取什么
        todos:state.todo
    }
}
//connect 方法执行之后才是一个高阶组件
//connect  方法有四个参数  常用前两个
// 第一个参数 mapStateToprops 作用是把store内的state注入到 当前组件的props 上
//第二个参数是可以是mapDispatchToProps，这个的主要作用是把action生成的方法注入到当前组件props上面
//直接第二个参数传递一个对象这里的对象就是actionCreaters 只要是传入了actionCreaters，在组件内就可以通过
//this.props.actionCreater来调用，在调用之后就会自动把他内部的actiondispach出去
export default connect(参数1，参数2，参数3，参数4)(TodoList)

import {map,fromJs} from 'Immutable'

let m1 =Map({a:1,b:2,c:3,d:{aa:1}})
clog(m1[a])//1 //原数据解构
let m2 = m1.set('a','11')
clog(m2.a)//2 新数据解构
clog(m1.a)//1 原数据解构
clog(m2===m1)//false 新内存地址
clog(m1.d===m2.d)//true 说明d的内存地址相同 这个节点共享了
//如果更改D 下面的aa则
let m3 = m1.set(['d','aa'],'22222')//欲修改的子节点在数组后面  是按从前向后排列的
//fromJS 把原生的JS对象转换成一个Immutable 数据解构对象
let m4 = fromJS({a:1,b:2,c:3,d:{aa:1}})
let m5 = m4.setIn([d,aa],'333')//添加 多级
clog(m4.getIn(['d','aa']))//获取多级的方法
let m6 = m4.updateIn(['d','aa'],value=>value+1)//更新
let m6 = m4.updateIn(['d'],value=>value(hhhh)=22233)//更新
let m7 =m4.mergeDeep({d:{bb:222}})//深度合并

 let immutable = require('seamless-immutable')
let m1 = immutable({a:1,b:2,{info:{name:'zhangsan'}}})
let m2 = m1.merge({a:2,b:3,c:6)
clog(m1.info.name)//使用js输出对象的方式使用即可
clog(m2.b)

import {
  combineReducers
} from 'redux-immutable';
 
import {
  createStore
} from 'redux';
 
const initialState = Immutable.Map();
const rootReducer = combineReducers({});
const store = createStore(rootReducer, initialState);

//这样就把 state再reducer 导出的时候变为一个immutable对象

import Immutable from 'immutable';
 
const initialState = Immutable.fromJS({
  name: null
});
 
export default (state = initialState, action) => {
  if (action.type === 'SET_NAME') {
    return state.set('name', action.payload);
  }
  return state;
};

//再配置的时候
import { combineReducers, routerReducer, stateTransformer } from 'redux-seamless-immutable'
import { createStore, applyMiddleware } from 'redux'
import createLogger from 'redux-logger'
 
import reducer from './reducers'
 
const rootReducer = combineReducers({ // 配置reducer
  reducer,
  routing: routerReducer //配置解决router和redux冲突
})
 
const loggerMiddleware = createLogger({//配置state解析
  stateTransformer: stateTransformer
})
 
const store = createStore(//加载中间件
  rootReducer,
  applyMiddleware(
    loggerMiddleware
  )
)