React Redux

最新推荐文章于 2023-03-15 09:20:32 发布

qdctop

最新推荐文章于 2023-03-15 09:20:32 发布

阅读量356

点赞数 1

分类专栏： ReactNative 文章标签： redux

本文链接：https://blog.csdn.net/u013003052/article/details/87907364

版权

ReactNative 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

文章目录

React Redux

ReactNative系列-文章

React Redux

是什么？

Redux是javascript状态容器，提供可预测化的状态管理。

作用, 好处？

前端单页面应用越来越复杂，需要很多state状态，Redux可以让这些state的变化可预测。

安装

$ npm install --save redux
$ npm install --save react-redux

react-redux是redux针对react的绑定库。

基础

在使用Redux之前，有一些核心概念需要理解，它有三个重要的组成部分，分别是Action, Reducer, Store。

Action

Action是一个普通对象，定义了传递给Reducer的数据结构。当我们需要保存数据时，将先从它发起，一般会通过store.dispatch(action)将action传到Store(到Store之前先经过Reducer)。

Reducer

Reducer指定了如何响应Action，并发送到store。一般会在这里判断action对象中的类型，然后去更新state。当它将state更新并返回时，即是发送给了Store。

Store

在Redux应用中，所有的state都被保存在一个单一对象中，这个单一对象就是Store。Store维持着应用的state，它提供getState()方法获取state，以及提供dispatch(action)的方法更新state。

流程图

store.dispatch(action) -> reducer process -> reducer return new state -> store update store.state -> render

使用

与ReactNative结合简单使用

下面做一个加减法的demo简单使用演示。创建一个react-native的helloworld项目：

$ react-native init helloworld

将redux库依赖进来：

$ cd helloworld
$ npm install redux react-redux --save

先创建action，在项目根目录下创建/src/redux/actions/index.js

export const increase = value => ({
  type: 'INC',
  value
})

export const descrease = value => ({
  type: 'DES',
  value
})

然后创建reducer，在项目根目录下创建/src/redux/reducers/CounterReducer.js

const initState = {
  totalValue: 0,
  numbers: 0
}
const CounterReducer = (state = initState, action) => {
  switch(action.type) {
    case 'INC':
      return Object.assign({}, state, {
        totalValue: state.totalValue + action.value,
        numbers: state.numbers + 1
      });
    case 'DES':
      return Object.assign({}, state, {
        totalValue: state.totalValue - action.value,
        numbers: state.numbers + 1
      });
    default:
      return state;
  }
} 
export default CounterReducer;

接着编写combineReducers辅助合并所有的Reducers，创建/src/redux/reducers/index.js

import { combineReducers } from 'redux';
import CounterReducer from './CounterReducer';

export default combineReducers({
  CounterReducer
});

最后创建store，位于App.js，将其改造为：

import React, {Component} from 'react';
import MainScreen from './src/screens/MainScreen';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './src/redux/reducers';

export default class App extends Component {
  render() {
    const store = createStore(rootReducer);
    return (
      <Provider store={store}>
        <MainScreen/>
      </Provider>
    );
  }
}

MainScreen位于/src/screens/MainScreen.js，创建它

import React from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { increase, descrease } from '../redux/actions';

class MainScreen extends React.Component {
  static propTypes = {
    totalValue: PropTypes.number.isRequired,
    numbers: PropTypes.number.isRequired,
    inc: PropTypes.func.isRequired,
    des: PropTypes.func.isRequired
  }
  render() {
    return(
      <View style={styles.container}>
        <Text style={styles.text}>{this.props.totalValue}</Text>
        <Button title="inc" onPress={()=>{
          this.props.inc(1);
        }}/>
        <Button title="des" onPress={()=>{
          this.props.des(1);
        }}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    color: 'black'
  }
})

const mapStateToProps = (state, ownProps) => ({
  totalValue: state.CounterReducer.totalValue,
  numbers: state.CounterReducer.numbers
});
const mapDispatchToProps = dispatch => ({
  inc: value => dispatch(increase(value)),
  des: value => dispatch(descrease(value))
});
export default connect(mapStateToProps, mapDispatchToProps)(MainScreen);

运行

上面的例子你或许会有些疑惑的地方:

createStore作用

通过const store = createStore(rootReducer)函数，创建一个Redux Store。在一个应用程序中，一般只有一个store，它将持有state树，改变state数据的唯一方式是通过store.dispatch(action)方法。

Provider的作用

<Provider store={store}>…</Provider>，将store赋给Provider组件的props中，Provider组件下的子组件可以调用connect()方法，来访问Redux Store。

connect()函数

Provider下的子组件调用connect()可以访问到store，它接受4个参数，connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])。

mapStateToProps(state, ownProps) 方法允许我们将store中的数据作为props绑定到组件中，只要store更新了就会调用mapStateToProps方法，该对象中的值将会更新到组件props中，然后界面数据得到更新，mapStateToProps返回的结果必须是object对象。

mapDispatchToProps(dispatch, [ownProps]) 第二个参数允许我们将action作为props绑定到组件中，mapDispatchToProps希望你返回包含对应action的object对象。这样我们就可以在props中直接去调用dispatch(action)方法。

combineReducers

将多个reducer合并为单个reducer函数，它将调用每个子reducer，并将其结果收集到一个状态对象中。所以在mapStateToProps中获取state时，需要注意相应reducer函数注册的键值。

Object.assign()

Object.assign创建一个副本，使用redux需要注意的是：1. 不要修改state，使用Object.assign创建副本返回；2. 在default情况下返回旧的state。

与网络请求结合使用

redux 与网络请求结合使用通用的方式是，使用异步的action。异步action可以利用redux-thunk这个中间件来辅助完成。
我们另外新建一个demo项目，用来演示：

$ react-native init reduxfetch

添加依赖库

$ cd reduxfetch
$ npm install redux react-redux redux-thunk --save

先创建action, 在项目根目录下新建/src/redux/actions/index.js

const requestGet = url => {
  return {
    type: 'GET',
    value: url
  }
}

const requestDone = respond => {
  return {
    type: 'DONE',
    value: respond
  }
}

const requestError = e => {
  return {
    type: 'ERROR',
    value: e.message
  }
}
// thunk action 创建函数
export const fetchGet = url => {
  // Thunk middleware 知道如何处理下面的函数
  return dispatch => {
    dispatch(requestGet(url));
    return fetch(url)
      .then(res => {
        return res.json();
      })
      .then(json => {
        setTimeout(() => {
          dispatch(requestDone(JSON.stringify(json)));
        }, 2000);
      })
      .catch(e => {
        dispatch(requestError(e));
      })
  }
}

然后创建reducer，新建/src/redux/reducers/RequestReducer.js

const initState = {
  loading: false,
  error: '',
  url: '',
  respond: ''
}
const RequestReducer = (state = initState, action) => {
  switch(action.type) {
    case 'GET':
      return {
        ...state,
        loading: true,
        error: '',
        url: action.value,
        respond: ''
      }
    case 'DONE':
      return {
        ...state,
        loading: false,
        error: '',
        respond: action.value
      }
    case 'ERROR':
      return {
        ...state,
        loading: false,
        error: action.value,
        respond: ''
      }
    default:
      return state;
  }
}

export default RequestReducer;

新建/src/redux/reducers/index.js

import { combineReducers } from 'redux';
import RequestReducer from './RequestReducer';

const rootReducer = combineReducers({
  RequestReducer
})
export default rootReducer;

然后创建一个界面用于展示，新建/src/screens/MainScreen.js

import React, {Component} from 'react';
import {StyleSheet, Text, View, Button, ScrollView, RefreshControl} from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { fetchGet } from '../redux/actions';

class MainScreen extends Component {
  static propTypes = {
    loading: PropTypes.bool.isRequired,
    error: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
    respond: PropTypes.string.isRequired,
    fetchGet: PropTypes.func.isRequired
  }

  render() {
    return (
      <View style={styles.container}>
        <Button title="请求" onPress={() => {
          this.props.fetchGet('http://file.qdc.wiki/yasi/audioList.json');
        }}/>
        <ScrollView style={styles.instructions}
          refreshControl={
            <RefreshControl refreshing={this.props.loading}/>
          }>
          <Text style={{color:'black'}}>
            {
              '请求：' + this.props.url + '\n' +
              '响应：' + this.props.respond + '\n' +
              '错误：' + this.props.error
            }
          </Text>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white',
    paddingTop: 40
  },
  instructions: {
    flex: 1
  },
});

const mapStateToProps = (state, ownProps) => {
  return {
    loading: state.RequestReducer.loading,
    error: state.RequestReducer.error,
    url: state.RequestReducer.url,
    respond: state.RequestReducer.respond,
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    fetchGet: url => dispatch(fetchGet(url))
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(MainScreen);

最后，创建一个store，将App.js改造一下

import React, {Component} from 'react';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import MainScreen from './src/screens/MainScreen';
import rootReducer from './src/redux/reducers';

const middleware = [ thunk ];
const store = createStore(
  rootReducer,
  applyMiddleware(...middleware)
)
type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Provider store={store}>
        <MainScreen/>
      </Provider>
    );
  }
}

运行

上面的例子你或许会有些疑惑的地方:

RequestReducer中的…state

我们原来在reducer中返回state为副本，可以通过Object.assign()方式来创建副本，当然也可以使用ES7提案的对象展开运算符来创建副本，它的一般型式是{…state, …newState}。

知识细节

原则一，Redux是单一数据源的，整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
原则二，State是只读的，唯一改变state的方法只有触发action，action是用来描述行为的已知对象。
原则三，使用reducers纯函数来执行修改state。
不要在reducer中修改传入参数。
不要在reducer中执行网络请求或者路由跳转。
不要在reducer中调用非纯函数，如Date.now()或Math.random()。
reducer需要保持纯净，单纯执行计算。
reducer中不修改state，使用Object.assign()创建副本来返回state。
reducer中可以使用对象展开运算符，将一个对象的可枚举属性拷贝至另一个对象。
reducer在default情况返回旧的state。
Redux应用只有一个单一的store。
connect()函数做了性能优化来避免很多不必要的重复渲染。（这样你就不必为了性能而手动实现React 性能优化建议中的shouldComponentUpdate方法。）
state的默认值里字段不能为undefined，否则使用该reducer的组件中的props无法找到该字段。

qdctop

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
React Redux

文章目录React Redux安装基础ActionReducerStore流程图使用与ReactNative结合简单使用createStore作用Provider的作用connect()函数combineReducersObject.assign()与网络请求结合使用RequestReducer中的…state知识细节ReactNative系列-文章React Redux是什么？Redu...
复制链接

扫一扫

专栏目录