Redux学习总结 逆战come!

Redux 介绍

Redux是什么?有什么作用?
Redux是一个管理状态容器,将整个前端应用的状态都统一到一个地方管理。通过单一数据流操作,来实现单一状态。使得前端应用更加方便的管理状态。

核心概念
整个state就是一个object,可以将store理解为前端的数据库。不能直接更改state,如果要更改state,则需要dispatch an action。而 action 则是一个对象,用于描述提交了什么操作,而不涉及对 state 具体的操作。
强制使用action来改变每一次的state,可以让我们更加容易追踪到每次state的变化。
而 Reducer 则是用来将 Action 和 State 串起来的一个函数。用于具体处理对 state 的改变。

使用redux的场景

  • 某个组件的状态,需要共享
  • 某个状态需要在任何地方都可以拿到
  • 一个组件需要改变全局状态
  • 一个组件需要改变另一个组件的状态

Redux 三大原则

  • 单一数据源
    在这里插入图片描述
  • State 只读性
  • 使用纯函数进行更改
    想要更改state,你需要编写reducers。Reducer 是一个纯函数。
    Reducer 接收 state 和 action 作为参数,并返回新的 state。

基本概念和api

Store
将需要修改的state都存入到store里,发起一个action用来描述发生了什么,用reducers描述action如何改变state tree 。创建store的时候需要传入reducer,真正能改变store中数据的是store.dispatch API

State
store 某个节点对应的数据集合就是state。可以通过store.getState()获得。

Action
Action 就是 View 发出的通知,表示 State 应该要发生变化了。 Action 描述当前发生的事情。改变 State 的唯一办法,就是使用 Action。它会运送数据到 Store。
Action是一个对象,其中type属性是必须的,表示Action的名称。其他属性随意。

store.dispatch()
是用来派发action的唯一方法。

Reducer
Reducer 是一个函数,它接受Action和当前的state作为参数,返回一个新的state。
整个应用的初始状态,可以作为state的默认值。
Store 收到Action之后,必须给出一个新的State副本,然后修改这个副本,最后返回新的副本。

combineReducers方法
Redux 提供了一个combineReducers方法,用于 Reducer 的拆分。你只要定义各个子 Reducer 函数,然后用这个方法,将它们合成一个大的 Reducer。 这种写法有一个前提,就是 State 的属性名必须与子 Reducer 同名。

Redux工作流程
首先用户发出Action。

store.dispatch(action)

然后store自动调用Reducer,并且传入两个参数:当前的state 和 收到的Action. Reducer 会返回新的state。
view层刷新 需要用 store.subscribe()的方法。

Redux中间件

Redux解决了同步状态更新的问题,但是异步操作却没有解决。
如果要 使Reducer在异步操作结束后自动执行,必须使用中间件。

applyMiddleware()
它是Redux的原生方法,作用是 将所有的中间件组成一个数组,依次执行。

中间件的用法

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(
    reducers, 
    applyMiddleware(thunk)
);

直接将thunk中间件引入,放在applyMiddleware方法之中,传入createStore方法,就完成了store.dispatch()的功能增强。即可以在reducer中进行一些异步的操作。

React-Redux
connect()
connect方法,用于从 UI 组件生成容器组件。connect的意思,就是将这两种组件连起来。 任何一个从 connect() 包装好的组件都可以得到一个 dispatch 方法作为组件的 props,以及得到全局 state 中所需的任何内容。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值