Redux核心概念

整个应用的状态(State)都放在Store中,组件每次的重新渲染都必然由状态变化引起
该状态变化便是用户在UI上发出的Action
然后Reducer通过接收Action和当前State,输出新的State

Action

action本质上是一个js对象,用来描述用户的操作,一般而言aciton应该包含将要执行的动作和有效载荷(因为action是store数据的唯一来源)

const GET_ELYS = 'GET_ELYS'
/*
action类型,也就是将要执行的动作
这并非是必须定义的,只是在构建大型应用时能有效减少样板代码
*/

{
    type: GET_ELYS,
    text: 'Get one Elys'
}
/*
包含将要执行的动作和有效载荷的完整action
这里的有效载荷包括actiontype,index,text或是其他什么别的数据
*/

ActionCreator

ActionCreator即Action创建函数,也就是生成action的方法

function getElys(text) {
  return {
    type: GET_ELYS,
    text
  }
}
/*通过传入数据返回一个action对象*/

在Redux中,只需要把Action创建函数的结果传递给dispatch()方法即可发起一次dispatch过程

dispatch(getElys(text))

不过多数情况下,使用react-redux提供的connect()来调用更好,同时使用bindActionCreators()可以自动将多个Action创建函数绑定到dispatch()

Reducer

负责接收action和state并且返回新的state

function reducer(state = {
  text: '你好，访问者',
  name: '访问者'
}, action) {
  switch (action.type) {
    case 'change':
      return {
        name: action.payload,
        text: '你好，' + action.payload
      };
  }
}

Store

保存整棵应用树的所有state,由Redux提供的createStore方法生成

const store = createStore(reducer);

ReactDOM.render(
  
    
  ,
  document.body.appendChild(document.createElement('div'))
);

/*通过中间件创建Store*/
var initState = {
    todo: {
        list: []
    }
}

const logger = createLogger()
const createStoreWithMiddleware = applyMiddleware(
    thunk,
    logger
)(createStore)
/*加入中间件创建Store*/

let store = createStoreWithMiddleware(reducer, initState)

展示组件和容器组件

展示组件

展示组件是用来描述如何展现的组件,她的数据来源是基于props,可以从prosp调用回调函数进行数据修改,同时也是纯组件,即不包含任何的状态(this.state)


  {this.props.text}

/*初始化组件数据*/
constructor(props) {
        super(props);
        var defaultState = {
            text: ""
        }
        this.state = defaultState 
    }

容器组件

进行数据处理,包含状态更新的组件便是容器组件,在Redux中使用connect方法,自动生成展示组件对应的容器组件

// MyComponent 是纯的 UI 组件
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

中间件

中间件提供一个位于action被dispatch后,但尚未被reducer接收之前的拓展点
可以利用Redux middleware来进行日志记录,创建崩溃报告,调用异步接口或路由等等

connect

语法

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

connect用于连接React组件和Redux store,返回一个新的与Redux store连接的组件

未完待续

redux基本