其实就是用来统一管理整个应用 State 的, 将所有的 state 变化进行统一的流程处理, 使应用的 state变化清晰可见.
Redux提供一种存储整个应用状态到一个地方的解决方案（可以理解为统一状态层），这个存储所有应用状态的地方称为“store”。 ① 组件发生事件（action）时不会再 setState, 而是将事件（action）通知给store，由 store 分发(dispatch)一个事件(action), 。 ② store会把旧的state和acticon类型传递给reducer。 ③ reducer会根据传入的action类型调用对应的方法，然后返回新的state。 ④ store 会收集到所有 reducer的state, 最后更新 state, 组件内部依赖的state的变化情况就可以通过订阅 store 来实现。
1. Single source of truth 单一数据源。整个应用的state，存储在唯一一个store中, 一个应用有且只有一个 store。
2. State is read-only 状态是只读的。唯一能改变state的方法，就是触发action操作。不要想着再去 setState 了, 用了 redux 之后你改变 state 唯一的方法就是 dispatch 一个 action（发送一个事件）
3. Changes are made with pure functions 在改变state tree时，用到action，同时也需要编写对应的reducer才能完成state改变操作。并且 reducer 一定要是一个纯函数, 不要在里面做一些乱七八糟的骚操作。
Action：比如点击按钮 登录操作 退出登录操作 都可以定义为一个 action
//types.js module.exports = { LOGIN_IN_DONE : 'LOGIN_IN_DONE', //登录 LOGIN_IN_ERROR : 'LOGIN_IN_ERROR', //登录错误 LOGIN_IN_OUT : 'LOGIN_IN_OUT', // 登出 } import types from '../types'; //action 类型 export function login_done(data) { // 登录 return { type: types.LOGIN_IN_DONE, data: data } } export function login_err(data) { // 登录错误 return { type: types.LOGIN_IN_ERROR, data: data } } export function login_out(data) { // 登出 return { type: types.LOGIN_IN_OUT, data: data } }Reducer:是一个纯函数, 不要在这里做逻辑操作的事情, 他就是根据一个 action 的 type 返回一个新的 state 一定要保证其纯洁性
import types from '../types'; const initialState = { icon: 'https://ws3.sinaimg.cn/large/005BYqpggy1g3nqgsgmj9j301s01s3yc.jpg', name: '', password: '' } export default function loginReducer(state = initialState, action) { switch (action.type) { case types.LOGIN_IN_DONE: return { status: 1, message: '登录', user: { ...state, ...action.data } } case types.LOGIN_IN_ERROR: return { status: -1, message: '登录错误', user: { ...action.data } } case types.LOGIN_IN_OUT: return { status: 0, message: '登出', user: { ...initialState, ...action.data } } default: return state; } }Store：store 就是一个保存着整个 APP 的所有state 的对象, 可以看作应用 state 的集合 , 也就是说你在任意组件中都可以通过 store 拿到你想要的 state
import { createStore, applyMiddleware, compose } from 'redux'; import thunk from 'redux-thunk'; import createLogger from 'redux-logger'; import rootReducer from '../reducers'; function configureStore(initialState) { return createStore( rootReducer, initialState, compose(applyMiddleware(thunk, createLogger)) ); } const store = configureStore(); export default store;Provider
React-Redux 的 API 分为两部分，分别是 Provider store 以及connect() 方法。connect() 方法用于连接单个的 RN 组件和 Redux Store，而 Provider 则作为根布局用于包装所有的 RN 组件，使得其中使用了 connect() 后的组件可以自由访问 Store
总而言之，Provider模块的功能很简单，从最外部封装了整个应用，并向connect模块传递store。
import React, {Component} from 'react'; import {Text, View} from 'react-native'; import store from './js/redux/store' import { Provider } from 'react-redux' import RootWithNavigation from './navigators/RootWithNavigation'; export default class App extends Component { render() { return ( <Provider store={store}> <View style={{ flexGrow: 1 }}> </View> </Provider> ); } }