它是什么
a predictable(可預料的) state container for JavaScript apps.
為什么要
01.It helps you write applications that behave consistently(行為固定) , run in different environments (client, server, and native)(多端運行) , and are easy to test(測試簡單) .
02.On top of that, it provides a great developer experience(開發(fā)體驗), such as live code editing combined with a time traveling debugger.
03.can use Redux together with React, or with any other view library(集成軟件).
04.It is tiny (2kB, including dependencies)(輕量微小).
如何使用
了解概念
If you're brand new to Redux and want to understand the basic concepts, see:
01.The Motivation behind building Redux(了解意圖), the Core Concepts(核心概念), and the Three Principles(三個原則).
02.The basic tutorial in the Redux docs(基礎教程).
03.If you learn best by looking at code and playing with it, check out our list of Redux example applications(示例應用), available as separate projects in the Redux repo, and also as interactive online examples on CodeSandbox.
......
安裝軟件
npm install --save redux
基本架構(gòu)
//導入類庫
import { createStore } from 'redux'
/**
* This is a reducer, a pure function with (state, action) => state signature.
* It describes how an action transforms the state into the next state.
*
* The shape of the state is up to you: it can be a primitive, an array, an object,
* or even an Immutable.js data structure. The only important part is that you should
* not mutate the state object, but return a new object if the state changes.
*
* In this example, we use a `switch` statement and strings, but you can use a helper that
* follows a different convention (such as function maps) if it makes sense for your
* project.
*/
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
//
let store = createStore(counter)
//添加訂閱
store.subscribe(() => console.log(store.getState()))
//發(fā)布消息
store.dispatch({ type: 'INCREMENT' })// 1
store.dispatch({ type: 'INCREMENT' })// 2
store.dispatch({ type: 'DECREMENT' })// 1
官方文檔
01.Introduction(介紹篇)
02.Basics(基礎篇)
03.Advanced(進階篇)
04.Recipes(秘訣篇)
05.FAQ(問答篇)
06.Troubleshooting(問題篇)
07.Glossary(術(shù)語篇)
08.API Reference(接口篇)
一些示例
01.Counter Vanilla: Source
02.Counter: Source | Sandbox
03.Todos: Source | Sandbox
04.Todos with Undo: Source | Sandbox
05.Todos w/ Flow: Source
06.TodoMVC: Source | Sandbox
07.Shopping Cart: Source | Sandbox
08.Tree View: Source | Sandbox
09.Async: Source | Sandbox
10.Universal: Source
11.Real World: Source | Sandbox
特別鳴謝
01.The Elm Architecture for a great intro to modeling state updates with reducers;
02.Turning the database inside-out for blowing my mind;
03.Developing ClojureScript with Figwheel for convincing me that re-evaluation should “just work”;
04.Webpack for Hot Module Replacement;
05.Flummox for teaching me to approach Flux without boilerplate or singletons;
06.disto for a proof of concept of hot reloadable Stores;
07.NuclearJS for proving this architecture can be performant;
08.Om for popularizing the idea of a single state atom;
09.Cycle for showing how often a function is the best tool;
10.React for the pragmatic innovation.
官方圖標
You can find the official logo on GitHub.
更新記錄
01.This project adheres to Semantic Versioning.
02.Every release, along with the migration instructions, is documented on the GitHub Releases page.
其贊助者
01.The work on Redux was funded by the community.
02.Meet some of the outstanding(杰出的) companies that made it possible:
Webflow
Ximedes
03.See the full list of Redux patrons, as well as the always-growing list of people and companies that use Redux.
