React-状态共享(上)

最新推荐文章于 2025-02-10 08:07:53 发布

Taylor Lin

最新推荐文章于 2025-02-10 08:07:53 发布

阅读量549

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： React

本文链接：https://blog.youkuaiyun.com/taylor_lin/article/details/96353921

笔记专栏收录该内容

21 篇文章

订阅专栏

本文探讨了在React应用中管理状态的方法，主要介绍Flux的使用流程，包括安装、创建store、actionCreators及dispatcher。接着，概述了Redux架构思维，详细解释了如何在Redux中增加todolist数据，涉及store、reducer、actionCreators和组件间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React-状态共享

Flux的使用流程

要想使用FLux架构思维，需要通过一个工具进行使用，这个工具就是flux
安装 flux
$ yarn add flux
在src目录下新建store目录，里面新建index.js

store有两个功能
存储数据
当数据发生改变时，视图要进行更新（当前组件中的state发生了改变，从新从store中获取数据，要想重新复制，那么要通过事件的发布，订阅）

// store/index.js
const EventEmitter = require( 'events' ).EventEmitter
const store = {
...EventEmitter.prototype,
state: {
count: 0
},
getState () {
return this.state
}
}
export default store

将store中的数据显示在组件（视图）中

import store from './store'
class xxx extends React.Component{
constructor () {
super()
this.state = {
count: store.getState().count
}
}
render () {
return (
<div>
<p> { this.state.count } </p>
</div>
)
}
}

用户操作，用户点击按钮，执行当前组件中的方法，这个方法的逻辑实际上是actionCreators中的方法
创建actionCreators.js

actions的发送要通过dispatcher来发送

import * as type from './type'
import dispatcher from './dispatcher';
const actionCreators = {
increment () {
// 创建动作
let actions = {
type: type.INCRMENT
}
// dispatcher来通过dispatch 发送actions
dispatcher.dispatch( actions )
}
}
export default actionCreators

创建dispatcher.js

import { Dispatcher } from 'flux';
import * as type from './type'
import state from './state'
const dispatcher = new Dispatcher()
// dispatcher.register( callback )
dispatcher.register( ( actions) => {
switch ( actions.type ) {
case type.INCRMENT:
// 用户操作了
state.count++
break;
default:
break;
}
})
export default dispatcher

通过store的事件的发布和订阅进行当前组件中 state 的重新赋值

当我们点击按钮是，要通过store的事件的订阅给当前组件的state重新赋值，要想这样做，我们必须进行事件的发布
难点：这个事件的发布往哪里写？
组件的生命周期中，数据可以进行一次修改的可以往 componentWillMount // componentDidMount
难点：这个事件的订阅那里写？
当我们点击按钮的时候，就要修改当前组件的state,也就是要进行事件的订阅

import React from 'react';
import logo from './logo.svg';
import './App.css';
import store from './store'
import actionCreators from './store/actionCreators';
class App extends React.Component {
constructor () {
super()
this.state = {
count: store.getState().count
}
}
increment () {
actionCreators.increment()
store.emit('count')
}
componentDidMount () {
store.on('count', () => {
this.setState({
count: store.getState().count
})
})
}
render () {
return (
<div>
<h3> flux </h3>
<button onClick = { this.increment }> + </button>
<p> count: { this.state.count } </p>
</div>
)
}
}
export default App;

redux

redux也是一个架构思维，在这个架构思维中 React 充当是视图 V

redux使用流程 ( todolist – 增加一条数据 )

redux是一个架构思维，我们实现需要一个工具，这个工具叫做redux
安装redux
$ yarn add redux
在src下新建一个store,store中新建index.js用来打造store

import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore( reducer ) // 不加new createStore() 参数不是一个 Object 而是一个Function
export default store

在store下新建一个state

const state = {
todos: [
{
id: 1,
task: '任务一'
}
]
}
export default state

在 store下新建一个 reducer

import state from './state'
const reducer = ( previousState = state , action ) => {
const newState = {
...previousState // 解构的原因是为了做深拷贝，我们操作newState，不会影响state
}
return newState
}
export default reducer

在你想要使用的组件中直接引用 store

import React, { Component,Fragment } from 'react'
import store from '../store'
class Content extends Component{
constructor () {
super()
this.state = {
todos: store.getState()
}
}
render () {
return (
<Fragment>
<div>
<ul>
<li> 1 </li>
</ul>
</div>
</Fragment>
)
}
}
export default Content

进行用户交互 React component — > actionCreators
在store下新建 actionCreators.js

import * as type from './type'
import store from './index'
const actionCreators = {
add_todos_item ( val ) {
//动作的创建
const action = {
type: type.ADD_TODOS_ITEM,
payload: val // 负载数据
}
// 动作的发送
store.dispatch( action )
}
}
export default actionCreators

在Button组件中触发 actionCreators中的方法

import React, { Component,Fragment } from 'react'
import actionCreators from './../store/actionCreators';
class Button extends Component{
add = () => {
let val = this.input.value
actionCreators.add_todos_item( val )
this.input.value = ''
}
render () {
return (
<Fragment>
<div>
<input type = "text" ref = { el => this.input = el } />
<br/>
<button onClick = { this.add }> + </button>
</div>
</Fragment>
)
}
}
export default Button

在 reducer中修改数据

import state from './state'
// const state = require( './state' )
import * as type from './type'
const reducer = ( previousState = state,action) => {
let newState = {
...previousState
}
//判断用户进行了那个用户交互 ，操作新状态
switch ( action.type ) {
case type.ADD_TODOS_ITEM:
//修改新状态
newState.todos.push({
id: newState.todos.length + 1,
task: action.payload
})
break;
default:
break;
}
return newState
}
export default reducer

进行数据个更新，通过store的订阅功能进行更新，也就是组件需要重新赋值一次数据
在Content组件中进行订阅

componentDidMount () {
store.subscribe( () => {
this.setState({
todos: store.getState().todos
})
})
}