Context与Store结合

最新推荐文章于 2022-08-12 15:50:15 发布

原创最新推荐文章于 2022-08-12 15:50:15 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#store #react

JavaScirpt 同时被 2 个专栏收录

43 篇文章

订阅专栏

React

15 篇文章

订阅专栏

本文介绍如何在React应用中利用Context API和自定义store进行状态管理，实现主题颜色切换功能。通过store.dispatch()更新数据，store.getState()获取状态，刷新UI。探讨了store与Context的结合使用，减少组件间状态传递的复杂性。

借助于context的跨级通信能力，可以将store管理数据的模式应用于每个组件当中。即将store通过context传递到子组件，一方面子组件可以通过store.dispatch()触发store中数据更新，另一方面子组件可以通过store.getState()方法获取最终的更新状态，刷新UI。
Redux解读
 React之Context
1.目录结构
在这里插入图片描述
制作一个更换主题色的App
参考【结合 context 和 store】
store.js

function createStore (reducer) {
  let state = null
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    state = reducer(state, action)
    listeners.forEach((listener) => listener())
  }
  dispatch({}) // 初始化 state
  return { getState, dispatch, subscribe }
}

const themeReducer = (state, action) => {
  if (!state) return {
    themeColor: 'red'
  }
  switch (action.type) {
    case 'CHANGE_COLOR':
      return { ...state, themeColor: action.themeColor }
    default:
      return state
  }
}

export default createStore(themeReducer)

Index.js
引入store，通过context将store传递给子组件。

import React, { Component } from 'react'
import Header from './Header'
import Content from './Content'
import PropTypes from 'prop-types';
import store from '../react-redux/store';

class Index extends Component {

  static childContextTypes = {
    store: PropTypes.object
  }


  getChildContext(){
    return { store }
  }

  render () {
    return (
      <div>
        <Header />
        <Content />
      </div>
    )
  }
}
export default Index;

Header.js
获取到store，获取状态中的值

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Header extends Component {

  static contextTypes = {
    store: PropTypes.object
  }

  constructor(props){
    super(props);

    this.state = {
      theme: {themeColor: ''}
    }
  }

  componentWillMount(){
    const {store} = this.context;
    this.updateThemeColor();
    store.subscribe(()=>this.updateThemeColor())
  }

  updateThemeColor = () => {
    const {store} = this.context;
    const state = store.getState();

    this.setState({
      themeColor: state.themeColor
    })
  }

  render () {
    console.log(this.context)
    return (
      <h1 style={{ color: this.state.themeColor }}>更换主题色</h1>
    )
  }
}

export default Header

Content.js
获取context中store的状态值，更新UI，同上类似的逻辑。

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ThemeSwitch from './ThemeSwitch'

class Content extends Component {
  render () {
    return (
      <div>
        <p>React.js 小书内容</p>
        <ThemeSwitch />
      </div>
    )
  }
}

export default Content

ThemeSwitch.js
调用store.dispatch方法去更新store。

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class ThemeSwitch extends Component {

  static contextTypes = {
    store: PropTypes.object
  }
  // dispatch action 去改变颜色
  handleSwitchColor (color) {
    const { store } = this.context
    store.dispatch({
      type: 'CHANGE_COLOR',
      themeColor: color
    })
  }

  render () {
    return (
      <div>
        <button onClick={()=>this.handleSwitchColor('red')}>Red</button>
        <button onClick={()=>this.handleSwitchColor('blue')}>Blue</button>
      </div>
    )
  }
}

export default ThemeSwitch