React Native 的Redux

Redux是React Native用来管理全局状态的一个工具。
React Native里面用到的是它的一个封装库,React Redux
为什么要使用Redux呢?当你的Rn项目越来越庞大的时候,需要机制来管理组件的状态的时候。
如何引入Redux?
npm install redux react-redux

怎么使用Redux呢?
Action 每次改变需要发送一个Action通知,可以通过
store的dispatch函数来发送通知。而发送的Action是一个对象,但是这个对象呢,一般会有个type变量,来表示
Store
Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。
reducer 表示怎么处理发送到Action, actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state,而Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。

React-Redux
React-Redux 是Redux的作者专门为了react-native对readux的封装。
整体流程如下:
首先你创建一个Action

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

调用 store.dispatch()

import { createStore } from 'redux';
const store = createStore(fn);

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

声明Reducer去处理

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};

const state = reducer(1, {
  type: 'ADD',
  payload: 2
});

一般的方式是通过 store.dispatch()来接收参数,也可以使用connect函数:

connect
store 里能直接通过 store.dispatch() 调用 dispatch() 方法,但是多数情况下你会使用 react-redux 提供的 connect() 帮助器来调用。
mapDispatchToProps 用来声明哪些Aciton是你用来接受的。mapStateToProps接受两个参数,第一个参数state表示接受到的 Redux store state。第二次参数是可选的参数,表示的表组件本身的props,如果传入了这个参数,表示自身组件的属性变化也会引发mapDispatchToProps函数。mapDispatchToProps必须返回一个object对象,返回的数据将成为这个组件的新属性。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值