最も簡単な方法でreduxの3つのコアを理解する

HTML構造は以下の通り

  
Count: 0
  + 1
  - 1

JavaScriptの構造は次のとおりです.

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

const {createStore} = Redux;

const store = createStore(counter);

store.subscribe(() => {
  setCount(store.getState());
});

function setCount (count) {
  document.getElementById('value').innerHTML = count;
}

document.getElementById('btn_increase').addEventListener('click', function () {
  store.dispatch({type: 'INCREASE'});
});

document.getElementById('btn_decrease').addEventListener('click', function () {
  store.dispatch({type: 'DECREASE'});
});

転載先:https://www.cnblogs.com/Lewiskycc/p/7455873.html