Redux知识

蔚落 2023-06-05 08:51 5阅读 0赞

1.什么时候需要Redux

“只要遇到React实在解决不了的问题，才需要使用Rduex”

◾ 用户的使用方式非常简单
    ◾ 用户之间没有协作
    ◾ 不需要与服务器大量交互，也没有使用 WebSocket
    ◾ 视图层（View）只从单一来源获取数据

Redux 的适用场景：多交互、多数据源。

◾ 用户的使用方式复杂
    ◾ 不同身份的用户有不同的使用方式（比如普通用户和管理员）
    ◾ 多个用户之间可以协作
    ◾ 与服务器大量交互，或者使用了WebSocket
    ◾ View要从多个来源获取数据

从组件的角度看

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

2.Redux的设计思想

（1）Web 应用是一个状态机，视图与状态是一一对应的。 （2）所有的状态，保存在一个对象里面。

3.1 Store

store：就是保存数据的地方，你可以把它看成一个容器，整个应用只能有一个Store

Redux提供了一个createStore这个函数，用来生成Store。

import {createStore} from 'redux' //redux是对象暴露
    var store=createStore()

上面的代码中，createStore函数接收另一个函数作为参数，返回新生成的Store对象。

3.2 State

Store对象包含所有数据。

store 提供了一个getState()

class App extends React.Component{ render(){ return( <div> app组件 　　　　　　　　<p>{store.getState()}</p>

</div>

) } }

3.3 action

state的变化会改变view的变化。用户在视图层通过触发事件时间发出通知。

action是一个对象。其中type属性是必须的，表示action的名称。其他属性可以只有配置

action({ type:"ADD",//action的名称ADD payload:5 //携带的信息 })

action描述当前发生的事情。改变state的唯一办法，就是使用action。他会运送数据到store

3.4 store.dispatch()

store.dispatch()是 store提供的一个方法 有两个属性

store.dispatch({ type:"ADD", payload:5 })

3.5 Reducer

createStore方法的参数必须是一个函数这个函数叫reducer，可以做匿名函数传，可以做命名函数传

reducer有两个参数：

一个是state：就是数据

一个是action： view视图层客户通过事件(dispath)提交的

reducer 函数必须有返回值返回的值就是新的状态

var store=createStore(function (state=datastate,action) { console.log(action,1111) switch (action.type) { case 'ADD': return state+action.payload;default: return state; } })

store.dispatch({
          type:"ADD",
          payload:5
    })

上面的代码中，reducer函数收到的名为ADD的action以后，就返回一个新的state，作为加法计算结果

3.6 store.subscribe()

store.subscribe()这个函数监听state，一旦sate发生改变，就自动执行这个函数

function redurn(){
        ReactDOM.render(<App />, document.getElementById('root'));
    }
    redurn()
    store.subscribe(redurn)

4. 工作流程

首先用户通过触发事件

store.dispatch(action)；

然后store自动调用reducer 并传两个参数：当前state和收到的action，reducer会返回新的state

var store=createStore(function (state=datastate,action) { 
    　　return state+action.payload
    })；

state一旦发生改变，store就会调用监听函数

store.subscribe(listener)；

`　　listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。`

function listerner() {
      let newState = store.getState();
      component.setState(newState);   
    }

` `

转载于:https://www.cnblogs.com/jiangningjn/p/11593072.html

Redux知识

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 React【Redux简介、什么时候使用Redux、Redux 库和工具、单向数据流、Redux Action、Redux Reducer、Redux Store】(十)

相关 Redux知识

相关 redux

相关 Redux—redux-thunk——combineReducers

相关 redux学习笔记（二）——react-redux基础知识

相关 redux学习笔记（一）——redux基础知识

相关 Redux

相关 react redux redux-saga

相关 redux

相关 Redux