B站 React教程笔记day2（2）Redux

最新推荐文章于 2025-02-09 18:18:22 发布

weixin_30708329

最新推荐文章于 2025-02-09 18:18:22 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/houfee/p/10903726.html

本文介绍了 Redux，它是 JS 应用程序的可预测状态容器。阐述了 app 状态存储、改变状态的方式，需定义纯函数 reducers 来指定 action 对状态树的转换。还提及 Redux 与 Flux 的区别，以及项目增长时对 store 的处理，可使用 subscribe 方法响应状态变化。

https://redux.js.org/introduction/getting-started

Redux is a predictable state container for JavaScript apps.

译：Redux 是 JS 应用程序的一个可预测的状态容器。

通过例子来学习Redux：下载

然后打开\examples\counter-vanilla

The whole state of your app is stored in an object tree inside a single store.

译：你的app中全部 store 被存在一个单独的 store 中，形如 object tree。

The only way to change the state tree is to emit an action, an object describing what happened.

译：唯一改变 store tree 的方法就是 emit action，这个 action 描述发生了什么变化。

To specify how the actions transform the state tree, you write pure reducers.

译：为了指定那些 actions 怎样改变 state tree，需要定义一个 pure reducers。

pure reducers 就是这样的函数，不继承任何东西：

function reducer(state,action){
    return 新的state;
}

官方计数器案例：

function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state - 1
        default:
            return state
    }
}

This is a reducer, a pure function with (state, action) => state signature.

译：这就是一个 reducer，一个纯函数，接受 state、action 参数，返回新的 state 表达式。

It describes how an action transforms the state into the next state.

译：它描述了一个 action 如何将一个 state 转变成新的 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.

译：这个 state 的类型取决于你，它可能是原始数据类型，数组，对象，甚至是一个不变的js结构体。

The only important part is that you should not mutate the state object, but return a new object if the state changes.

译：最重要的是你不应该去 mutate 这个 state object，而是当 the state 改变时，返回一个新的 state 。

Action一般都是大写字母，约定。

// Its API is { subscribe, dispatch, getState }.
let store = createStore(counter)

Create a Redux store holding the state of your app.

译：创建一个 Redux 的 store，来持有 app 的 state。

// 渲染
function render() {
    valueEl.innerHTML = store.getState().toString()
}

render()

// 监听事件变化，调度 store
document.getElementById('increment')
    .addEventListener('click', function () {
    store.dispatch({ type: 'INCREMENT' })
})

document.getElementById('decrement')
    .addEventListener('click', function () {
    store.dispatch({ type: 'DECREMENT' })
})

document.getElementById('incrementIfOdd')
    .addEventListener('click', function () {
    if (store.getState() % 2 !== 0) {
        store.dispatch({ type: 'INCREMENT' })
    }
})

document.getElementById('incrementAsync')
    .addEventListener('click', function () {
    setTimeout(function () {
        store.dispatch({ type: 'INCREMENT' })
    }, 1000)
})

Instead of mutating the state directly, you specify the mutations you want to happen with plain objects called actions.

译：你不是直接去改变 state，而是通过一个简单的 object 去描述改变，这个 object 称为 actions。

Then you write a special function called a reducer to decide how every action transforms the entire application's state.

译：然后你实现一个特殊的方法，来决定每一个 action 是怎么改变整个app的 state 的，这个方法称为纯函数。

通过改变官方的案例，让 state 不是一个简单的 number，变成一个 object ，此时页面上只使用 m 属性，n属性陪跑

<!DOCTYPE html>
<html>
  <head>
    <title>Redux basic example</title>
    <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
  </head>
  <body>
    <div>
      <h1> Clicked: <span id="value">0</span></h1>
      <p>
        <button id="increment">+</button>
        <button id="decrement">-</button>
        <button id="incrementIfOdd">Increment if odd-奇数加</button>
        <button id="incrementAsync">Increment async-1s后加</button>
      </p>
      <p>
        <!-- 将 input 中的值加到 m 上 -->
        <input type="text" id="targetNum">
        <button id="addTargetNum">加 input 的值</button>
      </p>
    </div>
    <script>
      function counter(state, action) {

        if (typeof state === 'undefined') {
          return {'m': 10, 'n': 30}
        }

        switch (action.type) {
          case 'INCREMENT':
            return {"m" : state.m + 1 , "n" : 30}
          case 'DECREMENT':
            return {"m" : state.m - 1 , "n" : 30}
          case 'INCREMENTODD':
            return {"m" : state.m + 1 , "n" : 30}
          case 'ADDTARGETNUM':
            return {"m" : state.m + action.number , "n" : 30}
          default:
            return state
        }
      }

      var store = Redux.createStore(counter)
      var valueEl = document.getElementById('value')

      function render() {
        // 此时是对象中的 m 值
        valueEl.innerHTML = store.getState().m.toString()
      }

      render()
      store.subscribe(render)

      // + 1
      document.getElementById('increment')
        .addEventListener('click', function () {
          store.dispatch({ type: 'INCREMENT' })
        })

      // - 1
      document.getElementById('decrement')
        .addEventListener('click', function () {
          store.dispatch({ type: 'DECREMENT' })
        })

      // 奇数 + 1
      document.getElementById('incrementIfOdd')
        .addEventListener('click', function () {
          // 注意此时 state 是 m、n 组成的对象
          if (store.getState().m % 2 !== 0) {
            store.dispatch({ type: 'INCREMENTODD' })
          }
        })

      // 异步 1s + 1
      document.getElementById('incrementAsync')
        .addEventListener('click', function () {
          setTimeout(function () {
            store.dispatch({ type: 'INCREMENT' })
          }, 1000)
        })

        // 将 input 的值 加到 m 上
        document.getElementById('addTargetNum')
        .addEventListener('click', function () {
            let number = Number(document.getElementById('targetNum').value)
            store.dispatch({ type: 'ADDTARGETNUM', number : number})
        })
    </script>
  </body>
</html>

If you're coming from Flux, there is a single important difference you need to understand.

译：如果你玩儿过Flux，这里有一个重要区别你要注意。

Redux doesn't have a Dispatcher or support many stores。

译：Redux中没有 Dispatcher 的概念（Store自己负责Dispatch个action到自己），也不允许有多个Store。（所以Redux擅长制作有强的“全局数据”概念的web应用，比如商城）

Instead, there is just a single store with a single root reducing function.

译：Redux中只有一个唯一的store，使用唯一的recucing function

As your app grows, instead of adding stores, you split the root reducer into smaller reducers independently operating on the different parts of the state tree

随着你的项目增长，此时不要去增加store，而是应该想着切割现在的store为一个个小store。

This is exactly like how there is just one root component in a React app, but it is composed out of many small components.

译：这点非常像React中仅仅允许使用一个根节点，但是根节点由众多的节点构成。