RN：React-Redux

目录

一. React-Redux是什么

1. React-Redux的组件拆分规范

1.1 UI组件

1.2 容器组件

2. React-Redux的API

2.1 connect()方法

2.2 Provider组件

二. 为什么要使用React-Redux

三. 怎么使用React-Redux

需要导入的组件：

redux
react-redux
redux-thunk
redux-devtools（可选）：Redux开发者工具，支持热加载、action重放、自定义UI等功能。
redux-persist（可选）：支持store本地持久化。
redux-observable（可选）：实现可取消的action。

yarn add redux
yarn add react-redux
yarn add redux-thunk

一. React-Redux是什么

React-Redux，是Redux的作者为了辅助我们使用Redux而编写的一个库，没有提供什么新功能。

通常情况下，我们写的一个组件内部既负责UI渲染，也负责管理数据和处理业务逻辑。而React-Redux秉承一个理念，就是要把一个组件拆分成UI组件和容器组件，UI组件只负责UI的渲染，容器组件只负责管理数据和处理业务逻辑，而容器组件的这些逻辑又完全是交给Redux来处理的，所以就可以使得我们编写的组件完全成了一个UI组件，组件内部会更加清爽。

1. React-Redux的组件拆分规范

使用React-Redux时要对组件进行拆分，React-Redux规定所有的UI组件都由用户提供，容器组件则是由React-Redux自动生成，生成后我们直接容器组件，而不再使用UI组件。容器组件其实是包在UI组件外面的，所以它即具备渲染能力，也具备数据管理和业务处理的能力，只不过我们看不到而已，我们只能看到我们编写的UI组件，那些东西都在容器组件内部。

1.1 UI组件

UI 组件有如下特征。

只负责UI的呈现，不带有任何业务逻辑。
所有的数据都由this.props属性提供。
内部没有状态，即不使用this.state这个属性。
不使用任何Redux的API。

下面就是一个UI组件的例子。

class CustomNavigator extends Component {
    render() {
        return(
            
                {this.props.headerTitle}
            
        );
    }
}

因为不含有状态，所以UI组件又称为“纯组件”，即它纯函数一样，纯粹由参数决定它的值。

1.2 容器组件

容器组件的特征恰恰相反。

负责处理业务逻辑，不负责UI的呈现。
有负责管理数据。
内部带有状态。
使用Redux的API。

2. React-Redux的API

2.1 `connect()`方法

React-Redux提供了connect()方法，用来生成一个UI组件对应的容器组件，即把组件和应用State建立映射关系。如果我们想让一个组件响应应用State的变化（即想让该组件的state由Redux来关系），就把搞成一个容器组件使用就可以了。

import {connect} from 'react-redux'
const VisibleTodoList = connect()(TodoList);

上面代码中，TodoList是UI组件，VisibleTodoList就是由React-Redux通过connect()方法生成的容器组件。

但是，因为没有定义业务逻辑，上面这个容器组件毫无意义，只是UI组件的一个单纯的包装层，实际开发中我们需要为每个容器组件定义两种业务逻辑，即：

输入逻辑：UI组件的输入逻辑类props要和应用的state建立映射关系。
输出逻辑：UI组件的输出逻辑类属性要和dispatch(addAction)建立映射关系。

因此，使用connect()方法从UI组件生成容器组件的完整API如下。

import { connect } from 'react-redux'

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList);

上面代码中，connect()方法接收了两个参数，其中mapStateToProps就负责输入逻辑的映射，mapDispatchToProps就负责输出逻辑的映射。

（1）mapStateToProps函数

mapStateToProps是一个函数，它用来建立UI组件的输入逻辑类props和应用state的映射关系，以此决定改组件想要使用应用state里的哪一部分数据。它可以得到应用的state一个参数。

该函数执行后立即返回一个JS对象，该JS对象里的每一个key都是该UI组件的某个props（必须同名），而每一个key对应的value则来自于应用state里数据的计算。这样就建立起了映射关系，请看下面的例子。

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos;
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed);
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed);
    default:
      throw new Error('Unknown filter: ' + filter);
  }
}

上面代码中，mapStateToProps函数接受应用的state作为参数，返回一个JS对象。这个JS对象有一个todos属性，是UI组件的同名参数，后面的getVisibleTodos也是一个函数，用来从state算出todos的值。

请注意：

mapStateToProps函数就像我们上一篇所说到的store.subscribe(callback)的那个回调函数一样，它会监听应用State的变化，所以每当state更新的时候，它就会自动执行，重新赋值UI组件的props，从而触发UI组件的重新渲染。

（2）mapDispatchToProps函数

mapDispatchToProps是connect()函数的第二个参数，它用来建立UI组件的输出逻辑类props和应用dispatch(addAction)的映射关系。它可以得到dispatch和ownProps（容器组件的props对象）两个参数。

该函数执行后立即返回一个JS对象，该JS对象里的每一个key都是该UI组件的某个事件类props（必须同名，onPress、onClick等），而每一个key对应的value就是我们要做的dispatch(addAction)。这样就建立起了映射关系，请看下面的例子。

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onClick: () => {
            dispatch({
                type: 'SET_VISIBILITY_FILTER',
                filter: ownProps.filter
            });
        }
    };
}

2.2 Provider组件

我们使用connect()方法生成容器组件以后，容器组件它自己也没有应用State啊，那它怎么完成应用State和UI组件的映射呢？所以我们还需要做一步，就是让让容器组件拿到应用State。

React-Redux提供Provider组件，可以让容器组件拿到应用State。做法很简单，只需要在应用根组件外面包一层Provider组件，那App的所有子组件就都默认拿到应用State了，所以容器组件作为根容器的子组件，自然也就拿到了。

import {Provider} from 'react-redux';

export default class App extends Component {
    render() {
        return (
            
                
            
        );
    }
}

二. 为什么要使用React-Redux

首先说明，React-Redux也不是必须使用的，它只是Redux的一个辅助库，可以帮助我们使得组件的内部更简洁。

因为React-Redux秉承一个理念，就是要把一个组件拆分成UI组件和容器组件，UI组件只负责UI的渲染，容器组件只负责管理数据和处理业务逻辑，而容器组件的这些逻辑又完全是交给Redux来处理的，所以就可以使得我们编写的组件完全成了一个UI组件，组件内部会更加清爽。

三. 怎么使用React-Redux

我们依旧以一个最简单的计数器为例。

导入相关的东西

-----------TestPage.js-----------

// 导入Redux相关的东西
import {createStore, combineReducers} from 'redux';
// 导入React-Redux相关的东西
import {connect, Provider} from 'react-redux';

先做Redux部分

三个关键词：store、reducer、action。

-----------TestPage.js-----------

// 第2步：
// 创建根reducer，合并所有子reducer
// 请注意，这个根reducer是个极其重要的东西，因为正是它合并子reducer的过程，决定了应用state里到底存放着什么东西，即什么组件的state要被放在它里面
// 什么组件的state想要交由应用的state来统一管理，我们就为该组件编写一个对应的子reducer来描述它state具体变化的过程并返回一个state，然后把这个reducer作为value存放在应用state里（即合并子reducer的时候）
// 刚创建根reducer时，我们可能不知道将来会有那些组件的state会被放在应用state里来统一管理，所以可以先空着，什么时候需要什么时候往这里添加就可以

// 这里我们假设计数器的state想要交由应用的state统一管理，计数器可以改变数字和背景色
// 所以我们编写一个计数器子reducer，专门用来完成计数器state的变化，并返回新的state
// 计数器的初始state
const defaultState = {
    number: 100,
    backgroundColor: 'pink',
}
// 计数器的state具体变化的过程
const counterReducer = (state = defaultState, action) => {
    switch (action.type) {
        case 'ADD_NUMBER':
            return {
                ...state,
                number: state.number + 1,
            };
        case 'CHANGE_BACKGROUND_COLOR':
            return {
                ...state,
                backgroundColor: action.backgroundColor,
            };
        default:
            return state;
    }
}
// 接下来第3步，就是结合该组件reducer里action.type的规定，为该组件创建对应的action，预备好action，到时候组件一被触摸就dispatch一个action

const rootReducer = combineReducers({// 这个对象就是应用的state
    // 应用state里的属性名当然可以随便起，但是为了好理解，我们就起做xxxState，为什么这么起呢？
    // 因为应用state的定义就是，它里面存放着项目中所有想被统一管理state的组件的state，所以我们起做xxxState，将来使用时很方便理解，比如state.counterState，就代表从应用state里取出counterState
    // 而且它的值就是对应的该组件的那个子reducer嘛，而reducer函数又总是返回一个state，这样xxxState = 某个state值，也很好理解
    counterState: counterReducer,
});


// 第1步：
// 创建项目唯一的store，发现需要一个reducer
const store = createStore(rootReducer);
// 所以接下来第2步，我们去创建一个reducer，回过头来填在这里


// 第3步：
// 为该组件创建对应的action，预备好action，到时候组件一被触摸就dispatch一个action
// 负责描述state要做什么变化以及变化所需的原料，用来dispatch
const addNumberAction = {type: 'ADD_NUMBER'};
// Action Creator
function changeBackgroundColor(backgroundColor) {
    // 返回一个action
    return {
        type: 'CHANGE_BACKGROUND_COLOR',
        backgroundColor,
    }
}
// 好，完成了这三步，Redux部分就算完成了，我们可以开始React-Redux的部分

再做React-Redux部分

四个关键词：UI组件、容器组件、connect方法、Provider组件。

-----------TestPage.js-----------

// 第1步：编写UI组件
// 仅负责UI的渲染工作，所需数据只能通过props获得
// 不能处理业务逻辑，不能使用Redux的API
class Counter extends Component {
    render() {
        // 该UI组件有三个属性，下面添加映射关系的时候会为该组件添加上这些属性
        // number：输入逻辑类属性
        // backgroundColor：输入逻辑类属性
        // addNumber：输出逻辑类属性
        // changeBackgroundColor：输出逻辑类属性
        const {number, backgroundColor, addNumber, changeBackgroundColor} = this.props;

        return (

样式部分

-----------TestPage.js-----------

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    counterViewStyle: {
        width: 200,
        height: 60,

        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
    },
});

参考博客：

阮一峰：Redux入门教程——React-Redux 的用法

RN：React-Redux

一. React-Redux是什么

1. React-Redux的组件拆分规范

1.1 UI组件

1.2 容器组件

2. React-Redux的API

2.1 connect()方法

2.2 Provider组件

二. 为什么要使用React-Redux

三. 怎么使用React-Redux

一. React-Redux是什么

1. React-Redux的组件拆分规范

1.1 UI组件

1.2 容器组件

2. React-Redux的API

2.1 connect()方法

2.2 Provider组件

二. 为什么要使用React-Redux

三. 怎么使用React-Redux

你可能感兴趣的:(RN：React-Redux)

2.1 `connect()`方法

2.1 `connect()`方法