Redux的基本使用示例

數(shù)字加減示例

1. 創(chuàng)建Action

const addAction = (num) => ({
  type: 'addNum',
  num: num?num:1,
})
const subAction = (num) => ({
  type: 'subNum',
  num: num?num:1,
})

2. 創(chuàng)建Reducer

const reducer = (state = {count: 0}, action) => {
  switch (action.type) {
    case 'addNum':
      state.count += action.num
      break;
    case 'subNum':
      state.count -= action.num
      break;
  
    default:
      break;
  }
  return {...state}
}

3. 創(chuàng)建Store對象

const store = Redux.createStore(reducer)

4. 在React組件中使用

class App extends React.Component {
  render() {
    return (
      <div>
        <h2>Redux練習</h2>
        <h3>計數(shù)數(shù)量：{store.getState().count}</h3>
        <button onClick={() => store.dispatch(addAction(1))}>加1</button>
        <button onClick={() => store.dispatch(subAction(1))}>減1</button>
      </div>
    )
  }
}

5. 監(jiān)聽state的變化從新渲染

store.subscribe(() => {
  ReactDOM.render(
    <App />, 
    document.querySelector('#app')
  )
})

總結

const addAction = (num) => ({
  type: 'addNum',
  num: num?num:1,
})
const subAction = (num) => ({
  type: 'subNum',
  num: num?num:1,
})

const reducer = (state = {count: 0}, action) => {
  switch (action.type) {
    case 'addNum':
      state.count += action.num
      break;
    case 'subNum':
      state.count -= action.num
      break;
  
    default:
      break;
  }
  return {...state}
}

const store = Redux.createStore(reducer)

class App extends React.Component {
  render() {
    return (
      <div>
        <h2>Redux練習</h2>
        <h3>計數(shù)數(shù)量：{store.getState().count}</h3>
        <button onClick={() => store.dispatch(addAction(1))}>加1</button>
        <button onClick={() => store.dispatch(subAction(1))}>減1</button>
      </div>
    )
  }
}


ReactDOM.render(
  <App />, 
  document.querySelector('#app')
)

store.subscribe(() => {
  ReactDOM.render(
    <App />, 
    document.querySelector('#app')
  )
})