react學習筆記 redux的極簡理解

2021-09-25 00:06:44 字數 1410 閱讀 6010

最近在學習react。

react本身的寫法挺簡單的,挺塊就學會了。

react-router之前學習過,當時學得有點迷糊,覺得學得差不多了。現在再看文件,發現文件非常好懂,上一次看其實沒看懂。

接著我就開始看redux了。

看的是redux的中文文件

通篇看下來,有幾個理解:

1、action,實際上是描述  操作的型別和傳入引數。 最簡單的方式 是物件,例如:

type: 指明操作的型別,index,是操作的引數

更好的寫法,應該用函式來返回action具體內容

function act(type, payload)

}

這個函式接收引數,返回action

2、reducer,實際時是按照action的型別名,執行相關的操作,

const initialstate={}

if (typeof state === 'undefined')

switch (action.type) ,state,)

default:

return state

}}

3、store及state

import  from 'redux'

import from './reducers'

const reducers = combinereducers()

const store = createstore(reducers)

export default store

// 獲取state

import store from './store/index.js'

console.log(store.getstate())

// 輸出的state值

// ,"userinfo":}

4、繫結到元件

這裡要用到react-redux

...

import from 'react-redux'

import from './action.js' // 這裡匯入action 這裡是用函式的action

...class comp extends react.component

const mapstatetoprops = (state, ownprops) =>

}const mapdispatchtoprops = (dispatch, ownprops) =>

}}export default connect(mapstatetoprops, mapdispatchtoprops)(comp)

這樣寫,就能把redux中的方法與內容 繫結到state裡了

React學習筆記 Redux基礎篇

redux,狀態管理器,將state進行統一的管理,適用於複雜的使用者操作 需要協同的使用者操作 涉及到許可權的網頁 多資料來源等場景。action 顧名思義,動作。需要執行怎樣的操作,action是乙個物件,內部包含了此action的型別和相關資訊,規範的action如下 每次都寫一遍action...

React學習記錄 Redux

入門 官網react.js 小書 父向子孫傳值用props import from redux export default function 第二步 根據計算規則生成 store let store createstore counter 第三步 定義資料 即 state 變化之後的派發規則 根據...

React學習筆記(五) Redux應用架構

核心運作流程如下 使用單一資料來源的好處在於整個應用狀態都儲存在乙個物件中,這樣可以隨時提取出整個應用的狀態進行持久化。此外,這樣的設計也為服務端渲染提供可能。在redux中,並不會用 來定義乙個store。而是定義乙個reducer,它的功能時根據當前觸發的action與當前應用的狀態進行迭代,這...