react学习笔记：redux的极简理解

最近在学习react。

react本身的写法挺简单的，挺块就学会了。

react-router之前学习过，当时学得有点迷糊，觉得学得差不多了。现在再看文档，发现文档非常好懂，上一次看其实没看懂。

接着我就开始看redux了。

看的是redux的中文文档

通篇看下来，有几个理解：

1、action，实际上是描述  操作的类型和传入参数。 最简单的方式 是对象，例如：

{
    type:'ADD',
    index:1
}

type: 指明操作的类型，index，是操作的参数

更好的写法，应该用函数来返回action具体内容

function act(type, payload){
    return {
        type,
        payload
    }
}

这个函数接收参数，返回action

2、reducer，实际时是按照action的类型名，执行相关的操作，

const initialState={}
function todoApp(state, action) {
  if (typeof state === 'undefined') {
    return initialState
  }

   switch (action.type) {
    case 'ADD':
      return Object.assign({},state,{payload:action.payload})
    default:
      return state
  }
}

3、store及state

import {combineReducers, createStore} from 'redux'
import {AddSub, UserInfo} from './reducers'

const Reducers = combineReducers({
  AddSub,
  UserInfo
})

const store = createStore(Reducers)
export default store

// 获取state
import store from './store/index.js'
console.log(store.getState())

// 输出的state值
// {"AddSub":{"number":0},"UserInfo":{"name":"userName"}}

4、绑定到组件

这里要用到react-redux

...
import {connect} from 'react-redux' 
import {act} from './action.js' // 这里导入action  这里是用函数的action
...

class comp extends React.Component {
    // comp code
}

const mapStateToProps = (state, ownProps) => {
  return {
    UserInfo: state.UserInfo
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    changeName: name => {
      dispatch(act())
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(comp)

这样写，就能把redux中的方法与内容 绑定到state里了