Redux初体验

栏目: 服务器 · 发布时间: 5年前

内容简介:redux是一种对项目进行统一的状态管理机制,父子组件间通信是通过props属性值传递和子组件回调父组件提前声明好的方法,整个state只能从上到下,而没有回溯的能力,redux将所有的state集中到所有组件顶层,然后分发给每个组件自己需要的state,更好的管理状态,顶层分发状态,让React组件被动地渲染,而react hooks解决的是pure render function (渲染函数组件)拥有状态和生命周期单一数据源 store 由rootReducer组成,用于最外层组件rootReducer

redux是一种对项目进行统一的状态管理机制,父子组件间通信是通过props属性值传递和子组件回调父组件提前声明好的方法,整个state只能从上到下,而没有回溯的能力,redux将所有的state集中到所有组件顶层,然后分发给每个组件自己需要的state,更好的管理状态,顶层分发状态,让React组件被动地渲染,而react hooks解决的是pure render function (渲染函数组件)拥有状态和生命周期

react-redux 构成

1.store

单一数据源 store 由rootReducer组成,用于最外层组件

import { createStore } from 'redux';
import { Provider } from 'react-redux';
const store = creacteStore(rootReducer);
<Provider store={store}><App /></Provider>

2.rootReducer

rootReducer由多个reducers组成

import { combineReducers } from 'redux';
export default combineReducers({reducerA, reducerB})

3.Reducer

每一个reducer由 oldState(initState) 和 action组成,通过action.type 返回 newState,default 返回oldState

export default function count (state = 0, action) {
  switch(action.type) {
​    case 'count':
​      return state + 1
​    default:
​      return state
  }
}

4.Action

action 可以是一个方法,用于返回对象,也可以直接是一个对象,type属性是必须的

export function count () {
    return {
    ​    type: 'count'
    }
}

5.conncet

connect 用于连接组件和数据

import { connect } from 'react-redux'
export default connect(mapStateToProps, mapDispatchToProps)(App)

6.mapStateToProps

mapStateToProps 方法用于将状态映射成属性,返回组件需要的属性

const mapStateToProps = (state) => {
    return {
        count: state.count
    }
}

7.mapDispatchToProps

mapDispatchToProps 提供给组件一个属性用于触发dispatch,也就是用户触发action

const mapDispatchToProps = (dispatch) => {
​    return {
​        addCount: () => dispath(someAction) // dispatch的对象是action
    }
}

react-redux注意点

state = store.getState() // 获取state
state.count = state.count + 1 // state是只读的,只能通过dispatch(action)改变

我写了一个完整的简单的 react-redux-count-demo 项目,也是上面演示的列子

参考 Redux 简明教程理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux? - Wang Namelos的回答 - 知乎


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

人人都是产品经理——写给产品新人

人人都是产品经理——写给产品新人

苏杰 / 电子工业出版社 / 2017-6 / 66.60

《人人都是产品经理——写给产品新人》为经典畅销书《人人都是产品经理》的内容升级版本,和《人人都是产品经理2.0——写给泛产品经理》相当于上下册的关系。对于大量成长起来的优秀互联网产品经理、众多想投身产品工作的其他岗位从业者,以及更多有志从事这一职业的学生而言,这《人人都是产品经理——写给产品新人》曾是他们记忆深刻的启蒙读物、思想基石和行动手册。作者以分享经历与体会为出发点,以“朋友间聊聊如何做产品......一起来看看 《人人都是产品经理——写给产品新人》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具