三个api

    • Redux.createStore //传入reducer创建store
    • store.subscribe //订阅store
    • store.dispatch //派发action
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.     <title>Redux basic example</title>
    6.     <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
    7. </head>
    9. <body>
    10.     <div>
    11.         <p>
    12.             Clicked: <span id="value">0</span> times
    13.             <button id="increment">+</button>
    14.             <button id="decrement">-</button>
    15.             <button id="incrementIfOdd">Increment if odd</button>
    16.             <button id="incrementAsync">Increment async</button>
    17.         </p>
    18.     </div>
    20.     <script>
    22.         function counter(state, action) { // reducers ：一个接收 state 和 action，并返回新的 state 的函数
    23.             if (typeof state === 'undefined') {
    24.                 return 0
    25.             }
    26.             switch (action.type) {
    27.                 case 'INCREMENT':
    28.                     return state + 1
    29.                 case 'DECREMENT':
    30.                     return state - 1
    31.                 default:
    32.                     return state
    33.             }
    34.         }
    35.         var store = Redux.createStore(counter)
    37.         store.subscribe(render) // 订阅
    39.         document.getElementById('increment')
    40.             .addEventListener('click', function () {
    41.                 store.dispatch({ type: 'INCREMENT' }) // store通过dispatch派发action { type: 'INCREMENT' }就是action
    42.             })
    43.         document.getElementById('decrement')
    44.             .addEventListener('click', function () {
    45.                 store.dispatch({ type: 'DECREMENT' })
    46.             })
    47.         document.getElementById('incrementIfOdd')
    48.             .addEventListener('click', function () {
    49.                 if (store.getState() % 2 !== 0) {
    50.                     store.dispatch({ type: 'INCREMENT' })
    51.                 }
    52.             })
    53.         document.getElementById('incrementAsync')
    54.             .addEventListener('click', function () {
    55.                 setTimeout(function () {
    56.                     store.dispatch({ type: 'INCREMENT' })
    57.                 }, 1000)
    58.             })
    61.         var valueEl = document.getElementById('value')
    62.         function render() {
    63.             valueEl.innerHTML = store.getState().toString()
    64.         }
    65.         render()
    67.     </script>
    69. </body>
    71. </html>

    createStore接收reducer创建store,
    subscribe订阅store