reactNativeプラットフォーム間app開発経験共有-Reduxの使用心得

Author:Mr.柳上原

いかなる努力にも劣らない努力を払う

私たちのすべての努力が、生活に裏切られないことを願っています.

初心を忘れないで、ずっと

を得なければなりません.
RNでのプロジェクトの実際の開発時のReduxグローバルパラメータの具体的な使用方法Reduxの利点:いくつかのグローバルで使用する必要があるパラメータを保存することができて、しかも1つのコンポーネントの中でこのパラメータを更新した後、グローバルの中でこのパラメータを使用する場所はすべてリアルタイムでショッピングカートに適用することができて、アイコンの右上の数字、formフォームのデータ辞書の配置、権限の配置、リアルタイムメッセージ数など
クライアントページ

//      redux-actions
import { handleActions } from 'redux-actions'
import * as actionTypes from '../constants'  //    actionTypes

const initState = {
  a: {},
  b: 0,
  c: [],
   ... //     
}

const map = {}

map[actionTypes.SEARCH_GET_PURCH_LIST] = (state, action) => {
  let value = action.payload.values
  return Object.assign({}, state, {b: value})
} 

map[actionTypes.SEARCH_GET_REALESTATE_LIST] = (state, action) => {
  let value = state.c.concat([{
    name: action.payload.name,
    id: action.payload.number === '  ' ? null : action.payload.shop.id,
  }])
  return Object.assign({}, state, {c: value})
}

constantsページ

// actionTypes
export const SEARCH_GET_PURCH_LIST = "SEARCH_GET_PURCH_LIST";
export const SEARCH_GET_REALESTATE_LIST = "SEARCH_GET_REALESTATE_LIST";
...
...

アクションページ

//      redux-actions
import {createAction} from 'redux-actions';
import * as actionTypes from '../constants';

export const getPurchListForm = createAction(actionTypes.SEARCH_GET_PURCH_LIST)
export const getRealEstateForm = createAction(actionTypes.SEARCH_GET_REALESTATE_LIST)

具体的なコンポーネントの中でReduxが保存したパラメータを呼び出します

//     
import React, {Component} from 'react'
import {connect} from 'react-redux'
import { store } from '../index';

class RealEstate extends Component {
  .....

this.props.a //   
this.props.b //   
this.props.c //   

//   Redux  
this.props.dispatch(getPurchListForm(this.props.b - 1)) //    

/**export const store = configure({})
global.store = store*/  //    index      store        
store.dispatch(getPurchListForm(this.props.b - 1)) //    

}

const mapStateToProps = (state, props) => {
  return {
    a: state.client.a
    b: state.client.b
    c: state.client.c

  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    deleteRealEstate: (...args) => dispatch(deleteRealEstate(...args)),
    dispatch
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(RealEstate)