環境搭建：詳情見官網

node、react-native-cli、python2、JDK1.8、AndroidStudio

一、準備工作 選擇性安裝組件

• redux：統一狀態管理
• react-redux：提供provide、connect API，綁定react組件獲取store
• redux-devtools：redux開發者工具，支持熱加載、action重放、自定義UI等
• redux-thunk：實現action異步獲取數據的middleware
• redux-persist：支持store本地持久化
• redux-observable：實現可取消的action

二、redux 介紹

Redux的概念：把整個應用看成一個component，共享一個store，所有頁面都可以拿到store中的內容。當this.store中的state改變的時候，所有關聯的頁面就會刷新。這樣，不用寫global，不用寫通知。就可以跨頁面共享一個狀態。所有redux中的狀態都是可以全局拿到的。

如：<SubComponent someProps={this.state.someState} />改變state來改變子控件UI的做法。所有用到rudux的頁面都是他的子控件。改變state，子頁面就都會跟著變。

• subscribe：訂閱事件
• state：狀態值
• action：view改變store的唯一方式，store.dispatch(action)
• reducer：純函數，接受參數state, action 返回newState

三、react-redux 介紹

• provider：包裹根組件，使所有子孫組件能通過connect高階函數綁定store

  class Index extends Component {
      render() {
          return {
              <Provider store={store}>
                  <RootComponent/>
              </Provider>
      	}
      }
  }
  

• connect：高階函數，接受參數(mapStateToProps,mapDispatchToProps)(component，通過mapstatetoprops,mapdispacter參數獲取newState,并返回一個接受組件的高階函數，

  最終返回一個綁定store的Connect組件

四、使用redux

Redux的流程：
store.dispatch(action) -> reducer處理action，返回一個新的state ->Store更新state ->相關UI更新

• 創建action

  /**
   * action 類型
   */
   const ADD_TODO = 'ADD_TODO'
   
   /**
    * action 創建函數
    */
    export function addTodo(text) {
        return {
            type: ADD_TODO,
            result: text
        }
    }
  

• 創建reducer

  export function reducerAdd (state, aciton) {
      switch(aciton.type) {
          // 返回即將改變的state,由store自己替換state的值
          case 'ADD_TODO' : return {...state, result: action.result}; 
          default: return state
       }
  }
  

• 使用combineReducers

  • reducers/todos.js

    export default function todos(state = [], action) {
      switch (action.type) {
      case 'ADD_TODO':
        return state.concat([action.text])
      default:
        return state
      }
    }
    

  • reducers/counter.js

    export default function counter(state = 0, action) {
      switch (action.type) {
      case 'INCREMENT':
        return state + 1
      case 'DECREMENT':
        return state - 1
      default:
        return state
      }
    }
    

  • reducers/index.js

    import { combineReducers } from 'redux'
    import todos from './todos'
    import counter from './counter'
    
    export default combineReducers({
      todos,
      counter
    })
    

  • App.js

    import { createStore } from 'redux'
    import reducer from './reducers/index'
    
    let store = createStore(reducer)
    console.log(store.getState())
    // {
    //   counter: 0,
    //   todos: []
    // }
    
    store.dispatch({
      type: 'ADD_TODO',
      text: 'Use Redux'
    })
    console.log(store.getState())
    // {
    //   counter: 0,
    //   todos: [ 'Use Redux' ]
    // }
    

• 使用action

  // 例子
  class Page extends React.Component {
    login = ()=>{
      //分發Action
      this.props.dispatch({type: 'INCREMENT'})
    }
    render(
      <View>
        <Text>{this.props.counter}</Text>
      </View>
    )
  }
  const mapStateToProps = state => {
      return {
          counter: state.counter,
      };
  };
  //關聯頁面和用到的模塊,store就會把子模塊的State通過props傳遞給此頁面
  export default connect(mapStateToProps)(Page);
  

• redux-thunk

  允許action創建函數返回一個異步函數

  • 使用thunk

  import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import rootReducer from './reducers';
  // 創建store的時候，第二個參數是中間件，redux-thunk提供了一個thunk中間件，用于處理異步的action
  export default createStore(
    rootReducer,
    applyMiddleware(thunk)
  );
  
  

  • 使用場景

  //同步action
  export const initAction = (data) => ({
  	type: 'INIT_DATA',
  	data
  })
  
  //異步action
  export const getDataAction = () => {
      //這個方法有一個dispatch的參數，這個dispatch就是store里的dispatch.
      return (dispatch) => {
          axios.get('path').then((res) => {
          	let data = res.data
              dispatch(initAction(data))
          })
      }
  }
  
  //組件中
  componentDidMount () {
      const action = getDataAction();
      store.dispatch(action);  
  }
  
  

• redux-saga

• redux-actions

• redux-promise