Redux状态管理 2.Redux如何和React一起使用

Redux如何和React一起使用

• 把store.dispatch 方法传递给组件，内部可以调用修改状态
• Subscribe订阅render函数，每次修改都重新渲染
• Redux相关内容，移到单独的文件index.redux.js单独管理

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore } from 'redux'

import { counter } from './index.redux'
const store = createStore(counter)

function render() {
  ReactDOM.render(<App store={store} />, document.getElementById('root'));
}
render()
store.subscribe(render)

App.js

import React, { Component } from 'react';
import { addNum } from './index.redux'
class App extends Component {
  render() {
    const store = this.props.store
    const num = store.getState()

    return (
      <div>
        <button onClick={()=>store.dispatch(addNum())}>增加</button>
        <div>现在有{num}</div>
      </div>
    )
  }
}

export default App;

index.redux.js

const ADD_NUM = 'Add'
const REDUCE_NUM = 'Reduce'

// reducer
export function counter(state=0, action) {
  switch(action.type) {
    case ADD_NUM:
    return state+1
    case REDUCE_NUM:
    return state-1
    default:
    return 10
  }
}

// action creator
export function addNum () {
  return {type: ADD_NUM}
}

export function reduceNum () {
  return {type: REDUCE_NUM}
}