Redux入门

   <p>本文尝试解释Redux是如何运作的。我们将用Redux创建一个小案列。如果你正在找靠谱的Redux文档，可以去看 <a href="/misc/goto?guid=4958973395905045282" rel="nofollow,noindex">官方文档</a> 。</p>    <h3>什么是Redux</h3>    <p>来自官方文档的描述：Redux是一个可预测的JavaScript状态容器。换句话说，Redux就是用来处理和管理应用的状态/数据。</p>    <p>如下：</p>    <p><img src="https://simg.open-open.com/show/d39718b28a99d815abd0ff8c409549d1.gif" alt="Redux入门 " width="1600" height="1080"></p>    <p><em>更多图解</em> <a href="/misc/goto?guid=4959755898857217592" rel="nofollow,noindex">点这里</a> _</p>    <p>现在我们来一步一步来解答上面的图代表什么意思。</p>    <h3>State（状态）</h3>    <p><img src="https://simg.open-open.com/show/4f0a2e245def5d0e0cd5fb6bf856cdee.png" alt="Redux入门 " width="260" height="82"></p>    <p>任何应用都有一个状态。有些状态保存在数据库中，有些状态保存到不同的地方。在Redux中，状态存在一个单一的对象中。它知道哪个页面正打开着，它知道当前用户信息等等。状态可能是标准化，也可以是规范化的，所以当在不同的浏览器打开时，会渲染出相同的应用（同样的页面，同样的用户...）</p>    <p>让我们为计数应用定义我们的状态：</p>    <pre>  <code class="language-javascript">var initialState = {counter: 0}`</code></pre>    <h3>render（渲染）</h3>    <p><img src="https://simg.open-open.com/show/ef413eecdc3a7a00ec37ad121ac0073d.png" alt="Redux入门 " width="300" height="78"></p>    <p>Redux和React.js一起用效果很好，但是不用react.js也可以。我们用原生JavaScript来把状态渲染到页面：</p>    <pre>  <code class="language-javascript"><div>-</div>`</code></pre>    <pre>  <code class="language-javascript">function render(state) {    document.getElementById('counter').textContent = state.counter;  }</code></pre>    <h3>Actions</h3>    <p><img src="https://simg.open-open.com/show/476785c2fd4ca5fcc13e50204059f469.png" alt="Redux入门 " width="300" height="138"></p>    <p>如果应用状态发生改变，那是因为有Actions触发了。他们可能是用户操作，也可能是异步操作，定时操作扥等等。我们将定义一个按钮来触发操作。</p>    <pre>  <code class="language-javascript"><button id="button">Increment</button>`</code></pre>    <pre>  <code class="language-javascript">document.getElementById('button').addEventListener('click', incrementCounter)`</code></pre>    <h3>Store 和 reducer</h3>    <p><img src="https://simg.open-open.com/show/32e90ab1e263698924750b9d9a8c91c3.png" alt="Redux入门 " width="300" height="130"></p>    <p>Actions不会马上改变state。Redux的 store 处理这事：</p>    <pre>  <code class="language-javascript">var store = Redux.createStore(reducer, initialState)    function incrementCounter() {    store.dispatch({      type: 'INCREMENT'    })  }</code></pre>    <p><img src="https://simg.open-open.com/show/7222fadd74e7487d05af3fd18e36113c.png" alt="Redux入门 " width="300" height="131"></p>    <p>store保存当前的状态，以及对actions做出反应。当一个action被触发，传入当前的state和当前的action到reducer中，reducer返回新的state，state被更新：</p>    <pre>  <code class="language-javascript">function reducer(state, action) {    if (action.type === 'INCREMENT') {      state = Object.assign({}, state, {counter: state.counter + 1})    }    return state  }</code></pre>    <h3>State 改变</h3>    <p>当state改变，重新渲染：</p>    <pre>  <code class="language-javascript">store.subscribe(function() {    render(store.getState())  })</code></pre>    <p>一个React.js渲染器可以很好的处理这件事，只更新改变的部分，而不会去更新全部。</p>    <h3>第一次渲染</h3>    <p>如果action没有被触发就不会渲染，所以我们来触发第一次渲染：</p>    <pre>  <code class="language-javascript">render(store.getState())`</code></pre>    <h3>最终代码</h3>    <p><a href="https://jsfiddle.net/bumbu/qt02zL0g/?utm_source=website&utm_medium=embed&utm_campaign=qt02zL0g" rel="nofollow,noindex">jsfiddle</a></p>    <pre>  <code class="language-javascript">// html  <div>-</div>  <button id="button">Inc</button></code></pre>    <pre>  <code class="language-javascript">// js  var initialState = {counter: 0}  var store = Redux.createStore(reducer, initialState)    function render(state) {    document.getElementById('counter').textContent = state.counter;  }    document.getElementById('button').addEventListener('click', function() {    incrementCounter()  })    function incrementCounter() {    store.dispatch({      type: 'INCREMENT'    })  }    function reducer(state, action) {    if (action.type === 'INCREMENT') {      state = Object.assign({}, state, {counter: state.counter + 1})    }    return state  }    store.subscribe(function() {    render(store.getState())  })    // 渲染初始化的 state  render(store.getState())</code></pre>    <h3>与MobX比较</h3>    <p>在Redux中，你可以控制任何事：actions, action的创建，状态更新等等。意味着每个应用程序都是可以预测的。但是导致了很多重复的代码。另一方面，MobX达到相同的效果，但隐藏了一些用户触发的actions，所以你可以写更少的代码。</p>    <p>当然，Redux更加成熟，以及支持一些新特性，比如服务器端渲染和一些很棒的开发工具。</p>    <p> </p>    <p> </p>    <p>来自：<a href="http://www.zcfy.cc/article/simple-redux-4728.html?utm_source=tuicool&utm_medium=referral">http://www.zcfy.cc/article/simple-redux-4728.html</a></p>    <p> </p>