React中使用Redux (一) - 在React中直接使用Redux

React中使用Redux

开始之前需要强调一下，redux和react没有直接的关系，你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux。

尽管这样说，redux依然是和React库结合的更好，因为他们是通过state函数来描述界面的状态，Redux可以发射状态的更新， 让他们作出相应; 目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去。

这里我创建了两个组件:

Home组件:其中会展示当前的counter值，并且有一个+1和+5的按钮;

Profile组件:其中会展示当前的counter值，并且有一个-1和-5的按钮;

**首先将结构搭建出来, 然后安装redux库:

npm i redux

**

安装完成后, 安装我们上一篇文章讲解的目录结构, 创建Store文件夹

store/index.js 中创建store

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

store/constants.js 中定义变量

exportconstCHANGE_NUM="change_num"

store/reducer.js

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

store/actionCreators.js

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

store中编写完成后, 在Home和Profile页面中使用store中的state, 核心代码主要是两个:

在 componentDidMount 中监听store的变化，当数据发生变化时重新设置 counter;

在发生点击事件时，调用store的dispatch来派发对应的action;

• Home组件

import React,{ PureComponent }from'react'import store from'../store'import{ changeNumAction }from'../store/actionCreators'exportclassHomeextendsPureComponent{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(<div><h2>Home</h2><h2>当前计数:{counter}</h2><button onClick={()=>this.changeNum(1)}>+1</button><button onClick={()=>this.changeNum(5)}>+5</button></div>)}}exportdefault Home

• Profile组件

import React,{ PureComponent }from'react'import store from'../store'import{ changeNumAction }from'../store/actionCreators'exportclassProfileextendsPureComponent{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(<div><h2>Profile</h2><h2>当前计数:{counter}</h2><button onClick={()=>this.changeNum(-1)}>-1</button><button onClick={()=>this.changeNum(-5)}>-5</button></div>)}}exportdefault Profile

我们发现Home组件和Profile组件中的代码是大同小异的, 所以这不是我们最终编写的代码, 后面还会对代码进行优化