react+react动态上传文件（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) export default store

store/constants.js 中定义变量

export const CHANGE_NUM = "change_num"

store/reducer.js

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 } }

store/actionCreators.js

import { CHANGE_NUM } from "./constants" export const changeNumAction = (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 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 ( <div> <h2>Home</h2> <h2>当前计数: {counter} </h2> <button onClick={() => this.changeNum(1)}>+1</button> <button onClick={() => this.changeNum(5)}>+5</button> </div> ) } } export default Home Profile组件 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 ( <div> <h2>Profile</h2> <h2>当前计数: {counter}</h2> <button onClick={() => this.changeNum(-1)}>-1</button> <button onClick={() => this.changeNum(-5)}>-5</button> </div> ) } } export default Profile

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