@芥末的糖-----redux

image

以下例子如果看不懂，就直接看总结，然后看最开始的图，然后对应代码
目录结构：都在同一个目录下

1.全局注入

//index.js全局
import React from 'react'
import { Provider } from 'react-redux'
import ReactDOM from 'react-dom'

import App from './App'

import store from './redux/store'

ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.querySelector('#root')
)

2.全局的reducers.js

import { combineReducers } from 'redux'

import list from './components/postlist/listReducer'
import form from './components/postform/formReducer'

export default combineReducers({
  list,
  form,
})

3.局部的组件

3.1formReducer.js

import { ADD } from './actionTypes'//命名空间

const defaultState = {
  postList: []
}
export default (state=defaultState, action) => {
  if (action.type === ADD) {
    return {
      ...state,
      postList: [...state.postList, action.payload]
    }
  }
  return state
}

3.2. postform.js提交功能

import React, { Component } from 'react'

import { connect } from 'react-redux'

import { ADD } from './actionTypes'

const mapDispatchToProps = (dispatch) => {
  return {
    add (payload) {
      dispatch({
        type: ADD,
        payload
      })
    }
  }
}

class PostForm extends Component {
  constructor () {
    super()
    this.state = {
      inputValue: ''
    }
    this.handleInputChange = this.handleInputChange.bind(this)
  }
  render () {
    return (
      <div>
        <input value={this.state.inputValue} onChange={this.handleInputChange} type="text"/>
        <button onClick={() => this.props.add(this.state.inputValue)}>add</button>
      </div>
    )
  }

  handleInputChange (e) {
    this.setState({
      inputValue: e.target.value
    })
  }
}

export default connect(null,mapDispatchToProps)(PostForm)

4局部的组件

4.1listReducer.js

import { LOAD } from './actionTypes'

const defaultState = {
  loadList: []
}

export default (state=defaultState, action) => {
  if (action.type === LOAD) {
    return {
      ...state,
      loadList: [...state.loadList, ...action.payload]
    }
  }
  return state
}

4.2PostList.js

import React, { Component } from 'react'
import randomString from 'random-string'

import { connect } from 'react-redux'

import { loadData } from './actionCreator'

const mapState = (state) => {
  return {
    list: state.list.loadList,
    loadlist: state.form.postList
  }
}

const mapDispatch = (dispatch) => {
  return {
    load (payload) {
      // dispatch 可以一个plain object 和 传入一个函数
      // 如果传入的plain object 或直接交给store, 接着调用reducer
      // 如果传入的是个函数，去执行函数
      dispatch(loadData(dispatch))
    }    
  }
}

class PostList extends Component {
  render () {
    return (
        <ul>
          {
            this.props.loadlist.map((value, index) => {
              return <li key={randomString()}>{value}</li>
            })
          }
          {
            this.props.list.map((value, index) => {
              return <li key={randomString()}>{value}</li>
            })
          }
        </ul>
    )
  }

  componentDidMount () {
    this.props.load()
  }
}

export default connect(mapState, mapDispatch)(PostList)

4.3actionCreator.js

import { LOAD } from './actionTypes'

export const loadDataPlain = (payload) => {
  return {
    type: LOAD,
    payload
  }
}

export const loadData =  (dispatch) => {
  return () => {
    setTimeout(() => {
      dispatch(loadDataPlain(['ddd']))
    }, 2000)
  }
}

总结：状态管理工具Vuex和redux的区别和理解

在我们的Vue中，
1.我们在根实例new Vue的过程中，加载了很多组件对象，例如router，Vuex等，
2.Vuex我们通过Vue.store对外暴露store模块在根实例中加载，Vue.store实例的过程中加载不同类型的A{state.actions,mutations}对象模块，不同模块通过namespaced来进行区分
3.页面链接store通过dispatched第一个参数就是我们store里加载的A，B，C名字加上模块的路径，第二参数就是payload。

在React中，
1.需要通过加载react-redux组件来帮助我们完成注入，react-redux提供两个功能，一个是我们的Provider在根实例中注入store，
2.store创建通过redux的createStore(reducers,applyMiddleware(thunk))来进行创建，reducers则是每个组件暴露的state，我们用reduxcombineReducers传入不同组件的state进行粘合成一个整体对象，Vue是直接注入每一个对象模块
3.在react里不同的是我们的redux组件是不提供直接dispatch的机会，所以我们用react-redux的另一个方法connect来进行和store的链接 ：
export default connect(mapState,mapDispatch)(组件名字) ，connect组件是一个高阶组件。mapState和mapDispatch是两个对象。
mapState对象{a:b},UI组件通过this.props.a来渲染，b则是(state.什么组件.组件state)
dispatched{type:"",payload}有两个参数，来通过组件的reducer（存state的地方）对type的处理，来对注入store前的state值的修改，对于数据的不可变性，我们用到了imutable.js组件库来处理...

                                                  。未完待续