如何在React中直接使用Redux_React_

import { createStore } from "redux"; import reducer from "./reducer"; const store = createStore(reducer) export default store

export const CHANGE_NUM = "change_num"

import { CHANGE_NUM } from "./constants" const initialState = { counter: 10 } export default function reducer(state = initialState, action) { switch(action.type) { case CHANGE_NUM: return {...state, counter: state.counter + action.num} default: return state } } 

import { CHANGE_NUM } from "./constants" export const changeNumAction = (num) => ({ type: CHANGE_NUM, num })

import React, { PureComponent } from 'react' import store from '../store' import { changeNumAction } from '../store/actionCreators' export class Home extends PureComponent { constructor() { super() this.state = { counter: store.getState().counter } } // 核心一: 在componentDidMount中监听store的变化，当数据发生变化时重新设置 counter; componentDidMount() { store.subscribe(() => { const state = store.getState() this.setState({ counter: state.counter }) }) } // 核心二: 在发生点击事件时，调用store的dispatch来派发对应的action; changeNum(num) { store.dispatch(changeNumAction(num)) } render() { const { counter } = this.state return ( 
Home
当前计数: {counter} 
 this.changeNum(1)}>+1 this.changeNum(5)}>+5
 ) } } export default Home 

import React, { PureComponent } from 'react' import store from '../store' import { changeNumAction } from '../store/actionCreators' export class Profile extends PureComponent { constructor() { super() this.state = { counter: store.getState().counter } } componentDidMount() { store.subscribe(() => { const state = store.getState() this.setState({ counter: state.counter }) }) } changeNum(num) { store.dispatch(changeNumAction(num)) } render() { const { counter } = this.state return ( 
Profile
当前计数: {counter}
 this.changeNum(-1)}>-1 this.changeNum(-5)}>-5
 ) } } export default Profile