React Native

伟哥带你玩Redux

2017-11-22  本文已影响19人  踏云小子

Redux有点类似信号编程,只需关注信号的发射和监听

四个要素

1.Store

import { createStore } from 'redux'
const store = createStore(fn)

2.State

const state = store.getState();

3.Action

const action = {
  type: 'ADD_INFO',//action的名称
  data//action附加的信息
}

4.Reducer

四个步骤

Redux在React中的应用

1.前戏:设计一个文件夹目录

· redux
  · actions
  · store
  · reducers

2.小试牛刀:state的展示与修改

3.正式实战:

3.1单个页面,共用一个redux
3.2多个页面,共用一个redux
Detail.jsx

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as userinfoActions from '../../redux/actions/userinfo'

// 任何时候,只要 Redux store 发生改变,mapStateToProps 函数就会被调用
function mapStateToProps(state) {
  return {
    haha: state.userinfo
  }
}

function mapDispatchToProps(dispatch) {
  return {
    userinfoActions: bindActionCreators(userinfoActions, dispatch)
  }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Detail);

//this.props.haha.userid以及this.props.haha.city就可以拿到了
上一篇 下一篇

猜你喜欢

热点阅读