源码
参考文档
1.redux 到底是什么呢
其实就是用来统一管理整个应用 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 来实现。
2.redux 的三原则
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 一定要是一个纯函数, 不要在里面做一些乱七八糟的骚操作。
3. Action Reducer Store的简单使用
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>
);
}
}
4. 界面的使用
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as loginAction from '../redux/actions/LoginActions';
import store from '../redux/store'
function mapStateToProps(state) {
return {
user: state.LoginReducer.user,
status: state.LoginReducer.status,
message: state.LoginReducer.message
}
}
function matchDispatchToProps(dispatch) {
return {
...bindActionCreators(loginAction, dispatch)
}
}
const {login_done} = this.props //login_done是loginAction里的
let obj = { name: this.state.name, password: this.state.password, icon: 'https://ws3.sinaimg.cn/large/005BYqpggy1g1qsw2e8bzj30sg0sg0ui.jpg' }
login_done(obj) //登录Action
// connect 连接组件与 store ,任何时候只要 store 发生改变, mapStateToProps 都会被调用, 函数接收两个参数 第一个参数里有两个参数 分别是mapStateToProps matchDispatchToProps
export default connect(mapStateToProps, matchDispatchToProps)(LoginPage)