Redux 基礎教程以及結合 React 使用方式

redux 三要素

示例**

結合 react 使用

todolist 示例

擴充套件如果還沒看夠

本文教你實現乙個最簡單的 redux 應用，以及結合 react 如何使用。

狀態管理工具，使用之後可以清晰的知道應用裡發生了什麼。資料如何修改，如何更新的。

以前我剛接觸 redux 這類狀態管理工具的時候就在想：為什麼需要這些東西呢，重新整理資料就消失了，也不能持久化儲存資料，有啥用呢？

後來慢慢的應用越做越多，功能越做越複雜，就會發現，很多資料什麼原因修改的，什麼時候修改的，自己是一臉懵逼。啥也想不起來了，維護起來真的痛苦。到了這個時候才發現 redux 這類工具的厲害之處。名字也很應景的，狀態管理工具。說的很清楚了，就是管理狀態的。讓資料變化過程盡可能的清晰、可**。

在專案中新增 redux 並不是必須的。請根據專案需求選擇是否引入 redux

存放 state 資料的 store（將 action 和 reducer 聯絡到一起的物件）

說了這邊文章是教你建立乙個最簡單的 redux 應用，那我們下面就看看使用乙個 redux 到底能有多簡單，多快呢。

使用前先引入 redux：npm install redux -s

const
=require
('redux');
const store =
createstore
(counters)
;

store.
dispatch
(increment()
);

檢視結果

就這三步，操作完了吧，那我們現在可以看一下結果了

// 通過 store.getstate() 獲取 state 資料
console.
log(
'counters: '
, store.
getstate()
);// => counters： 1

過程總結：

建立乙個操作指令 action -> 建立乙個 reducer -> 通過 createstore(reducer) 建立乙個 store -> 通過 store。dispatch(action) 執行 reducer 中的更新操作，更新 store 中的資料。

這些就是 redux 的核心用法，有沒有感覺很簡單的，有興趣的話可以跟我一起繼續往下，看一看結合 react 該如何使用呢。

用來組合 react 和 redux 配合使用的外掛程式

$ npm

$ cd react-redux-todos

$ npm

install redux react-redux -s

示例**

預覽位址

當有多個 reducer 時，建立 store 之前需要將它們先進行合併

import
from
'redux'
;// 合併成乙個 reducers
const reducers =
combinereducers()
;

redux 中文文件

這裡有關於 redux 最詳細的介紹和講解，我就不多此一舉了，有興趣的同學可以去看看哈。