03-HK integrated Redux

Redux introduce

motivation

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

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

Reducer

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.

Store

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,
        value:cityName
    }
}

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 = {
    cityName:""
}

export default (state = defaultState,action) => {
    const { type,value } = action;
    let newState = JSON.parse(JSON.stringify(state));
    switch(type){
        case GET_CITY_NAME:
            newState.cityName = value;
            return newState;
        default:
            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 {


      componentDidMount(){
        this.getLocalCity();
      }
      getLocalCity = (params) => {
        let map = new window.BMap.LocalCity();
        map.get((result) => {
          const cityName = "Guangzhou" || result.name;
          store.dispatch(getCityNameAction(cityName));
        }
        )

      }
      

      render(){
        return <Fragment>
          <Router>
            <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>
          </Router>
        </Fragment>
      }

  }