redux一些笔记

作者: 一点金光 | 来源:发表于2019-08-21 08:17 被阅读0次

Redux 笔记一：简单串讲
redux一些笔记
Redux初步理解
Redux-saga
了解Redux源码
React 初探（五）- Redux、React-Redux
redux and react-redux
GraphQL笔记一：简单串讲
详解react、redux、react-redux之间的关系
详解react、redux、react-redux之间的关系

它是什么

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(开发体验), 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

基本架构

//导入类库
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()))

//发布消息
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(术语篇)
08.API Reference(接口篇)

一些示例

特别鸣谢

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.