#03-HK rental integration Redux

Keywords: Front-end React Fragment JSON Mobile

03-HK integrated Redux

This article is hkzf The series of mobile tutorials aims to help beginners quickly master the project development based on React technology stack through a series of articles.

Redux introduce


JavaScript needs to manage more states than ever, and Redux tries to make state changes predictable

Three principles

Single data source

State is read-only

Using pure functions to perform modifications

Three concepts


Action is the payload that transfers data from the application to the store


Reducers specify how to respond to changes in application status actions And sent to the store, remember that actions only describes the fact that something happened, not how the application updates the state.


Single data source

Redux application in HK application - shared city name

Action Creator src/store/actionCreator/index.js

import { GET_CITY_NAME } from '../actionTypes'
export const getCityNameAction = (cityName) => {
    return {
        type: GET_CITY_NAME,

Action Type src/store/actionTypes/index.js

// Get type of city name
export const GET_CITY_NAME = "GET_CITY_NAME"

Reducer src/store/reducer/index.js

import mapReducer from './mapReducer'
import { combineReducers } from "redux"
export default combineReducers({mapReducer})

MapReducer src/store/reducer/mapReducer.js

import {GET_CITY_NAME } from '../actionTypes'

const defaultState = {

export default (state = defaultState,action) => {
    const { type,value } = action;
    let newState = JSON.parse(JSON.stringify(state));
        case GET_CITY_NAME:
            newState.cityName = value;
            return newState;
            return state;

Single store

import reducer from './reducer'
import { createStore } from 'redux'

export default createStore(reducer)

Use the shared variables in the store

//Current positioning City
const { mapReducer } = store.getState();
const cityName = mapReducer.cityName;

Distribute Action example src/App.js

import React,{ Fragment } from "react"
import { HashRouter as Router,Route} from "react-router-dom"
import Home from "./pages/Home"
import List from "./pages/List"
import News from "./pages/News"
import Profile from "./pages/Profile"
import HKLayout from "./components/HKLayout"
import { getCityNameAction } from './store/actionCreator'
import BMap from './pages/BMap'
import CityList from './pages/CityList'

import store from "./store"

 export default class TabBarExample extends React.Component {

      getLocalCity = (params) => {
        let map = new window.BMap.LocalCity();
        map.get((result) => {
          const cityName = "Guangzhou" || result.name;


        return <Fragment>
            <Route path="/" exact render={()=> <HKLayout><Home/></HKLayout>}></Route>
            <Route path="/List" exact render={()=><HKLayout> <List/></HKLayout>}></Route>
            <Route path="/News" exact render={()=><HKLayout><News/></HKLayout>}></Route>
            <Route path="/Profile" exact render={()=><HKLayout><Profile/></HKLayout>}></Route>
            <Route path="/CityList" exact component={CityList}></Route>
            <Route path="/BMap" exact component={BMap}></Route>


Posted by mistercash60000 on Wed, 04 Dec 2019 00:39:48 -0800