摘要：的使用用戶發出函數算出新的重新渲染三大原則單一數據源，利用的形式向下傳播數據流決定只讀，通過修改通過純函數來修改組件狀態，是描述動作的純函數連接和基于全局的，選擇我們要注入的不同的組件分開把注入，讀取方法三劍客先確定一下初始狀

react-native, react, react-redux, react-navigaition, redux-thunk, redux-persist
用戶發出action, reducer函數算出新的state, view重新渲染

單一數據源，利用props的形式向下傳播（react數據流決定）

state只讀，通過action修改

通過純函數reducer來修改組件狀態，reducer是描述action動作的純函數

import { connect, Provider } from "react-redux"

mapStateToProps: 基于全局的state，選擇我們要注入的props

不同的組件分開connec

function select(state){
    return{
        // 把state.todos注入，讀取方法： this.props.visibleTodo
        visibleTodo: state.todos
    }
}

const todoApp connect(select)(App)
// export default todoApp

// store = "balabala"

    

// 先確定一下初始狀態（狀態表示的格式）
export default {
    money: 0,
    lastJob:"no job"
}

定義動作，比如搶劫銀行、搬磚，但是怎么搶怎么搬還是reducer來定

/**
 * Created by liuyiman on 2017/7/3.
 */

// 定義一個menoy+的action
function addmoney(money){
    return {
        // 可以用一個文件管理type，之所以是type是因為我的reducer要根據這個來判斷
        type: "ADD_MONEY",
        money
    }
}
function setLastJob(job){
    return {
        type: "SET_JOB",
        job
    }
}
// 定義一個賺錢的方式1 ，搶劫銀行
export function robBank(){
    return (dispatch, getState) => {
        // 賺一百萬
        let { earn } = getState()
        dispatch(addmoney(earn.money + 1000000))
        return dispatch(setLastJob("robber"))
    }
}
// 定義一個賺錢的方式2，建材轉移者
export function moveBrick(){
    return (dispatch, getState) => {
        console.log("s",getState())
        let { earn } = getState()
        // 賺一塊錢
        dispatch(addmoney( earn.money + 1 ))
        dispatch(setLastJob("brick mover"))
    }
}
// 破產,數據清零
export function goBroke() {
    return {
        type: "BROKE",
        money: 0,
        job:"broke"
    }
}

描述action如何改變store(in fact state)

import { combineReducers } from "redux"
import initializeState from "./initializeState"
// 定義一個reducer
function earn( state = initializeState, action ) {
    switch (action.type) {
        case "ADD_MONEY":
            return{
                ...state,
                money:action.money
            }
        case "SET_JOB":
            return{
                ...state,
                lastJob:action.job
            }
        case "BROKE":
            return{
                ...state,
                money:action.money,
                lastJob:action.job
            }
        default:
            return state
    }
}

export default earn

不同的組件可以 connet 到不同的 store

import { createStore, applyMiddleware, compose, combineReducers } from "redux"
import thunkMidlleware from "redux-thunk"
import earn from "./reducers"
import { persistStore, autoRehydrate} from "redux-persist"
import { AsyncStorage } from "react-native"

// base reducer
let baseReducers = {
    earn: earn
}
/*
* 考慮到后面要將react-navigation的reducer加進來，使用redux-persist,所以寫了這個helper
* const store = configStore(reducers)()
* */
const configStore = function (reducers = {}) {
    const rootReducer = combineReducers({
        ...baseReducers,
        ...reducers
    })
    return function (_options = {}) {
        const store = createStore(
            rootReducer,
            _options.initialState,
            compose(
                applyMiddleware(thunkMidlleware),
                autoRehydrate()
            )
        )
        const options = {
            storage: AsyncStorage,
            blacklist: _options.blacklist
        }
        persistStore(store, options)
        return store
    }
    
}

export default configStore

對store.dispatch的重新定義

在發出action和執行reducer之間，添加了其他功能

使dispatch可以接受函數說作為參數，使異步的action可以被觸發

// 無論killSomeOne是Action create還是普通的返回{}的action
this.props.dispath(killSomeOne("vincent"))

本地保存store狀態（react-native 本地緩存），可以設置白名單黑名單自動保存等等，特別好用

/*
* 考慮到后面要將react-navigation的reducer加進來，使用redux-persist,所以寫了這個helper
* const store = configStore(reducers)()
* */
const configStore = function (reducers = {}) {
    const rootReducer = combineReducers({
        ...baseReducers,
        ...reducers
    })
    return function (_options = {}) {
        const store = createStore(
            rootReducer,
            _options.initialState,
            compose(
                applyMiddleware(thunkMidlleware),
                autoRehydrate()
            )
        )
        const options = {
            storage: AsyncStorage,
            blacklist: _options.blacklist
        }
        persistStore(store, options)
        return store
    }
    
}

export default configStore

import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button
} from "react-native";
// navigation
import { TabNavigator, addNavigationHelpers, StackNavigator } from "react-navigation"
// for connect redux and react
import { Provider,connect } from "react-redux"
import configStore from "./redux/store"
// import actions
import {moveBrick, robBank, goBroke} from "./redux/actions"
// initialState
import initialState from "./redux/store"

// 賺錢頁面
class Earn extends Component {
  constructor(props) {
    super(props)
  }
  render(){
    const { earn, dispatch } = this.props
    console.log( "saa",initialState,earn )
    return(
        
          先賺一個億！
          my money$:{earn.money}
          my last job:{earn.lastJob}
           dispatch(robBank())}/>
           dispatch(moveBrick())}/>
          價格指導：搬磚 -> $1; 打劫 -> $1000000
             dispatch(goBroke())}/>
        
        )
  }
}

// 傳入 earn頁面的redux
const earnSelect = function (state) {
    return{
        earn: state.earn
    }
}
// 連接，吧earn上面的select傳入earn的props里面
const ConnnetedEarn = connect(earnSelect)(Earn)

// tab navigation的另一個頁面
class Screen extends Component{
    constructor(props){
        super(props)
    }
    render() {
        const { navigate } = this.props.navigation
        return(
            
                SCREEN!
                 {navigate("Stack2")}}/>
            
        )
    }
}

// 注冊一個tag navigator
const AppNav = TabNavigator({
    "earn":{
        screen: ConnnetedEarn
    },
    "screen": {
        screen: Screen
    }
})

// stack navigation 的頁面
class Stack2 extends Component {
    constructor(props){
        super(props)
    }
    render(){
        const {navigate} = this.props.navigation
        return (
            
                Stack2
                 navigate("screen")}/>
            
        )
    }
}

/*
* 注冊stack
* 一個是 上面的 tag navigation的頁面
* 另一個是 上面的 stack2
* */
const StackNav = StackNavigator({
    App:{
        screen: AppNav,
        title: "app"
    },
    Stack2: {
        screen: Stack2,
        title: "stack2"
    }
})

const navInitialState = StackNav.router.getStateForAction(AppNav.router.getActionForPathAndParams("screen"))
const navReducer = (state = navInitialState, action) => {
    console.log("state:",state)
    let nextState = StackNav.router.getStateForAction(action, state);
    console.log("action", action)
    return nextState || state
}

/*
* 加入navReducer,生成store
* */
const store = configStore({
    nav: navReducer
})({
    blacklist:["nav"]
})

/*
* stack app
* 利用addNavigationHelper吧navigation傳進去
* */
class App extends Component{
    render(){
        return(
            
        )
    }
}

/*
* 把nav傳進去
* */
function select(state) {
    console.log("state",state)
    return {
        nav: state.nav
    }
}
/*
* connect connect!
* */
const ConnectedApp = connect(select)(App)


// 加上 provider和store
class reduxLearn extends Component {
  render() {
    return (
        
          
        
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5,
  },
});

// 注冊
AppRegistry.registerComponent("reduxLearn", () => reduxLearn);