03-HK 集成Redux

本文是 hkzf 移动端 的系列教程，旨在通过一系列的文章来帮助初学者快速掌握基于React技术栈的项目开发。

Redux介绍

动机

JavaScript 需要管理比任何时候都要多的 state （状态） ， Redux 试图让 state 的变化变得可预测

三大原则

单一数据源

State 是只读的

使用纯函数来执行修改

三大概念

Action

Action 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据 ）传到 store 的有效载荷

Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

Store

单一的 数据源

HK应用中Redux的应用-共享城市名称

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

// 获取城市名称的类型
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;
    }
    
}

单一的 store

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

export default createStore(reducer)

使用 store 里面的共享变量

//当前定位城市
const { mapReducer } = store.getState();
const cityName = mapReducer.cityName;

分发Action例子 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 = "广州" || 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>
      }

  }