React复习（3）：React-Redux主题颜色改变案例

---

一、纯React版主题颜色改变

简单组件间参数props传递：
组件关系：

App.js部分代码“

import React,{Component} from 'react'

class ChangeColor extends Component{
  constructor(props){
    super(props)
  }
  render(){
    const {change}=this.props
    return (
      <div>
        <button onClick={()=>{change('red')}}>Red</button>
        <button onClick={()=>{change('green')}}>Green</button>
      </div>
    )
  }
}

class Text extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>
        <h2 style={{color:this.props.color}}>Text</h2>
      </div>
    )
  }
}

class App extends Component{
    constructor(props){
      super(props)
      this.state={
        color:'black'
      }
    }
    change(e){
      this.setState({
        color:e
      })
    }
    render(){
      return(
        <div>
          <h1 style={{color:this.state.color}}>App</h1>
          <Text color={this.state.color}></Text>
          <ChangeColor change={(e)=>{this.change(e)}}></ChangeColor>
        </div>
      )
    }
}

export default App;

二、Redux改写后

1.redux下载

npm i redux --save

2.基本框架编写
（在上面代码基础上）

import {createStore} from 'redux'
//定义初始状态
const initState={
  color:'black',
}
//创建reducer即仓库的逻辑
const reducer=function(state,action) {
  switch(action.type){
    case "CHANGE_COLOR":{
      return {
        ...state,
        color:action.color,
      }
    }
    default:{
      return state
    }
  }
}
//创建仓库
const store=createStore(reducer,initState)
//dispatch改变状态
store.dispatch({type:"CHANGE_COLOR",color:'red'})
//获取状态
console.log(store.getState())//{color: 'red'}...

3.redux注入状态到组件中
本例中redux生成的store中就存储了一个状态：color，获取方法是getState(),执行如上代码，获取的是一个对象：

所以获取color的代码为：

store.getState().color

即App组件不需要再维护color，传递的参数变成了：store.getState().color，
更改后代码：

import React,{Component} from 'react'
import {createStore} from 'redux'
//定义初始状态
const initState={
  color:'black',
}
//创建reducer即仓库的逻辑
const reducer=function(state,action) {
  switch(action.type){
    case "CHANGE_COLOR":{
      return {
        ...state,
        color:action.color,
      }
    }
    default:{
      return state
    }
  }
}
//创建仓库
const store=createStore(reducer,initState)
//dispatch改变状态
// store.dispatch({type:"CHANGE_COLOR",color:'red'})
//获取状态
console.log(store.getState().color)//{color: 'red'}...

class ChangeColor extends Component{
  constructor(props){
    super(props)
  }
  render(){
    const {change}=this.props
    return (
      <div>
        <button onClick={()=>{change('red')}}>Red</button>
        <button onClick={()=>{change('green')}}>Green</button>
      </div>
    )
  }
}

class Text extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>
        <h2 style={{color:this.props.color}}>Text</h2>
      </div>
    )
  }
}

class App extends Component{
    constructor(props){
      super(props)
      // this.state={
      //   color:'black'
      // }
    }
    change(e){
      this.setState({
        color:e
      })
    }
    render(){
      return(
        <div>
          <h1 style={{color:store.getState().color}}>App</h1>
          <Text color={store.getState().color}></Text>
          <ChangeColor change={(e)=>{this.change(e)}}></ChangeColor>
        </div>
      )
    }
}

export default App;

4.组件按钮触发点击修改redux中的状态
即调用dispatch方法，根据reducer中的逻辑，对state进行改写，注意：这里只是改变了store中的state，即只改变了你使用redux自定义的store，而并没有同步到react组件中，也不会显示到视图中，代码如下，此时观察控制台的输出，法相确实改变了store中的color状态，但视图没有反应。（本次更改，只是将change函数原来的setState方法改变react状态改成了使用store.dispatch()方法改变redux中的状态）

import React,{Component} from 'react'
import {createStore} from 'redux'
//定义初始状态
const initState={
  color:'black',
}
//创建reducer即仓库的逻辑
const reducer=function(state,action) {
  switch(action.type){
    case "CHANGE_COLOR":{
      return {
        ...state,
        color:action.color,
      }
    }
    default:{
      return state
    }
  }
}
//创建仓库
const store=createStore(reducer,initState)
//dispatch改变状态
// store.dispatch({type:"CHANGE_COLOR",color:'red'})
//获取状态
console.log(store.getState().color)//{color: 'red'}...

class ChangeColor extends Component{
  constructor(props){
    super(props)
  }
  render(){
    const {change}=this.props
    return (
      <div>
        <button onClick={()=>{change('red')}}>Red</button>
        <button onClick={()=>{change('green')}}>Green</button>
      </div>
    )
  }
}

class Text extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>
        <h2 style={{color:this.props.color}}>Text</h2>
      </div>
    )
  }
}

class App extends Component{
    constructor(props){
      super(props)
      // this.state={
      //   color:'black'
      // }
    }
    change(e){
      store.dispatch({type:"CHANGE_COLOR",color:e})
      console.log(store.getState().color)
    }
    render(){
      return(
        <div>
          <h1 style={{color:store.getState().color}}>App</h1>
          <Text color={store.getState().color}></Text>
          <ChangeColor change={(e)=>{this.change(e)}}></ChangeColor>
        </div>
      )
    }
}

export default App;

5.redux中的状态修改并同步到react组件中
首先，改变react中状态的唯一方法是setState()，处理上一个问题的时候，我们***使用更改redux状态的方法dispatch替换了更改react状态的方法setState()***,所以，同步数据，我们也要使用setState,当我们发现redux的store发生了变化，我们感觉并取到了这个变化，然后使用setState()去更改我们的react状态。

store.subscribe()

这个API相当于一个监听者，监听store的变化，我们只需在使用这个函数的时候同时调用setState()即可。
那么我们什么时候使用这个监听API呢，当然是当组件装载完成后，即store中状态改变之后，（setState函数传递的参数是一个对象，调用它的目的是为了重新渲染一遍视图，即使setState()里面传入的是是个空对象{}，也会重新调用一边render函数，达到同步渲染的结果）。
代码如下：（具体修改在App组件中，componentDidMount涉及到的是react生命周期）

import React,{Component} from 'react'
import {createStore} from 'redux'
//定义初始状态
const initState={
  color:'black',
}
//创建reducer即仓库的逻辑
const reducer=function(state,action) {
  switch(action.type){
    case "CHANGE_COLOR":{
      return {
        ...state,
        color:action.color,
      }
    }
    default:{
      return state
    }
  }
}
//创建仓库
const store=createStore(reducer,initState)
//dispatch改变状态
// store.dispatch({type:"CHANGE_COLOR",color:'red'})
//获取状态
console.log(store.getState().color)//{color: 'red'}...

class ChangeColor extends Component{
  constructor(props){
    super(props)
  }
  render(){
    const {change}=this.props
    return (
      <div>
        <button onClick={()=>{change('red')}}>Red</button>
        <button onClick={()=>{change('green')}}>Green</button>
      </div>
    )
  }
}

class Text extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>
        <h2 style={{color:this.props.color}}>Text</h2>
      </div>
    )
  }
}

class App extends Component{
    constructor(props){
      super(props)
      // this.state={
      //   color:'black'
      // }
    }
    change(e){
      store.dispatch({type:"CHANGE_COLOR",color:e})
      console.log(store.getState().color)
    }
    render(){
      return(
        <div>
          <h1 style={{color:store.getState().color}}>App</h1>
          <Text color={store.getState().color}></Text>
          <ChangeColor change={(e)=>{this.change(e)}}></ChangeColor>
        </div>
      )
    }
    componentDidMount(){
      store.subscribe(()=>{
        this.setState({})
      })
    }
}

export default App;

这时完整的项目改写完毕