一文详解React Redux使用方法

const { createStore } = require('redux') // 初始化的数据 const initialState = { name: '李雷', counter: 100 } // 定义reducer函数：纯函数 // 两个参数： // 参数一：store中目前保存的state // 参数二：本次需要更新的action（dispatch传入的action） // 返回值：返回值会作为store之后存储的state function reducer(state = initialState, action) { switch (action.type) { case 'change_name': return { ...state, name: action.name } case 'add_numer': return { ...state, counter: state.counter + action.num } default: return state } } // 创建store const store = createStore(reducer) module.exports = store

const store = require('./store') console.log(store.getState()) // { name: '李雷', counter: 100 } // 修改store中的数据：必须action const nameAction = { type: 'change_name', name: '韩梅梅' } store.dispatch(nameAction) console.log(store.getState()) // { name: '韩梅梅', counter: 100 } const nameAction2 = { type: 'change_name', name: '夏洛' } store.dispatch(nameAction2) console.log(store.getState()) // { name: '夏洛', counter: 100 } // 修改counter const counterAction = { type: 'add_numer', num: 10 } store.dispatch(counterAction) console.log(store.getState()) // { name: '夏洛', counter: 110 }

const store = require('./store') const unSubscribe = store.subscribe(() => { console.log('订阅数据的变化:', store.getState()) }) // 修改store中的数据：必须action store.dispatch({ type: 'change_name', name: '韩梅梅' }) store.dispatch({ type: 'change_name', name: '夏洛' }) // 取消订阅 unSubscribe() // 修改counter store.dispatch({ type: 'add_numer', num: 10 })

const { ADD_NUMBER, CHANGE_NAME } = require("./constants") const changeNameAction = (name) => ({ type: CHANGE_NAME, name }) const addNumberAction = (num) => ({ type: ADD_NUMBER, num }) module.exports = { changeNameAction, addNumberAction }

const ADD_NUMBER = "add_number" const CHANGE_NAME = "change_name" module.exports = { ADD_NUMBER, CHANGE_NAME }

const { CHANGE_NAME, ADD_NUMBER } = require('./constants') // 初始化的数据 const initialState = { name: '李雷', counter: 100 } function reducer(state = initialState, action) { switch (action.type) { case CHANGE_NAME: return { ...state, name: action.name } case ADD_NUMBER: return { ...state, counter: state.counter + action.num } default: return state } } module.exports = reducer

const { createStore } = require('redux') const reducer = require('./reducer') // 创建store const store = createStore(reducer) module.exports = store

const store = require('./store') const { changeNameAction, addNumberAction } = require('./store/actionCreators') store.dispatch(changeNameAction('独孤月')) store.dispatch(addNumberAction(100)) console.log(store.getState()) // { name: '独孤月', counter: 200 }

import * as actionTypes from './constants' export const addNumberAction = (num) => ({ type: actionTypes.ADD_NUMBER, num }) export const subNumberAction = (num) => ({ type: actionTypes.SUB_NUMBER, num })

export const ADD_NUMBER = "add_number" export const SUB_NUMBER = "sub_number"

import * as actionTypes from './constants' const initialState = { counter: 100 } function reducer(state = initialState, action) { switch (action.type) { case actionTypes.ADD_NUMBER: return { ...state, counter: state.counter + action.num } case actionTypes.SUB_NUMBER: return { ...state, counter: state.counter - action.num } default: return state } } export default reducer

import { createStore } from "redux" import reducer from "./reducer" const store = createStore(reducer) export default store

import React, { PureComponent } from 'react' // 引入store import store from '../store' import { addNumberAction } from '../store/actionCreators' export default class Home extends PureComponent { constructor() { super() this.state = { counter: store.getState().counter } } componentDidMount() { store.subscribe(() => { const state = store.getState() this.setState({ counter: state.counter }) }) } addNumber(num) { store.dispatch(addNumberAction(num)) } render() { const { counter } = this.state return ( 
 
Home Counter: {counter}
  this.addNumber(1)}>+1 this.addNumber(5)}>+5 this.addNumber(8)}>+8
 ) } }

import React, { PureComponent } from 'react' // 引入store import store from '../store' import { subNumberAction } from '../store/actionCreators' export default class Profile extends PureComponent { constructor() { super() this.state = { counter: store.getState().counter } } componentDidMount() { store.subscribe(() => { const state = store.getState() this.setState({ counter: state.counter }) }) } subNumber(num) { store.dispatch(subNumberAction(num)) } render() { const { counter } = this.state return ( 
 
Profile Counter: {counter}
  this.subNumber(1)}>-1 this.subNumber(5)}>-5 this.subNumber(8)}>-8
 ) } }

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { Provider } from 'react-redux'; import store from './store' const root = ReactDOM.createRoot(document.getElementById('root')); root.render(   );

import React, { PureComponent } from 'react' import { connect } from 'react-redux' import { addNumberAction, subNumberAction } from '../store/actionCreators' export class About extends PureComponent { clacNumber(num, isAdd) { if(isAdd) { this.props.addNumber(num) } else { this.props.subNumber(num) } } render() { const { counter } = this.props return ( 
 
About Counter: {counter}
 this.clacNumber(6, true)}>+6 this.clacNumber(9, true)}>+9 this.clacNumber(6, false)}>-6 this.clacNumber(9, false)}>-9
 ) } } // connect() 返回值是一个高阶组件 // function mapStateToProps(state) { //   return { //     counter: state.counter //   } // } const mapStateToProps = (state) => ({ counter: state.counter }) const mapDispatchToProps = (dispatch) => ({ addNumber: num => dispatch(addNumberAction(num)), subNumber: num => dispatch(subNumberAction(num)) }) export default connect(mapStateToProps, mapDispatchToProps)(About)

export const changeBannersAction = (banners) => ({ type: actionTypes.CHANGE_BANNERS, banners }) export const changeRecommendsAction = (recommends) => ({ type: actionTypes.CHANGE_RECOMMENDS, recommends })

import * as actionTypes from './constants' const initialState = { counter: 100, banners: [], recommends: [] } function reducer(state = initialState, action) { switch (action.type) { case actionTypes.CHANGE_BANNERS: return { ...state, banners: action.banners } case actionTypes.CHANGE_RECOMMENDS: return { ...state, recommends: action.recommends } default: return state } } export default reducer

import React, { PureComponent } from 'react' import { connect } from 'react-redux' import axios from 'axios' import { changeBannersAction, changeRecommendsAction } from '../store/actionCreators' export class Category extends PureComponent { componentDidMount() { // 发送请求 axios.get('http://123.207.32.32:8000/home/multidata').then(res => { const banners = res.data.data.banner.list const recommends = res.data.data.recommend.list this.props.changeBanners(banners) this.props.changeRecommends(recommends) }) } render() { return ( 
 
Category Page
 ) } } const mapDispatchToProps = (dispacth) => ({ changeBanners: banners => dispacth(changeBannersAction(banners)), changeRecommends: recommends => dispacth(changeRecommendsAction(recommends)) }) export default connect(null, mapDispatchToProps)(Category)

import { createStore, applyMiddleware } from "redux" import thunk from "redux-thunk" import reducer from "./reducer" // 正常情况下 store.dispatch(object) // 想要派发函数 store.dispatch(function) // applyMiddleware 可以传入多个中间件，","隔开 const store = createStore(reducer, applyMiddleware(thunk)) export default store

import * as actionTypes from './constants' import axios from 'axios' export const changeBannersAction = (banners) => ({ type: actionTypes.CHANGE_BANNERS, banners }) export const changeRecommendsAction = (recommends) => ({ type: actionTypes.CHANGE_RECOMMENDS, recommends }) export const fetchHomeMultidataAction = () => { // 如果是一个普通的action，需要返回action对象 // 问题: 对象中不能直接拿到从服务器请求的异步数据 // redux 不允许返回一个函数，需要中间件 return (dispatch, getState) => { // console.log(getState().counter) // 100 // 进行异步操作: 网络请求 axios.get('http://123.207.32.32:8000/home/multidata').then(res => { const banners = res.data.data.banner.list const recommends = res.data.data.recommend.list // dispatch({type: actionTypes.CHANGE_BANNERS, banners}) // dispatch({type: actionTypes.CHANGE_RECOMMENDS, recommends}) dispatch(changeBannersAction(banners)) dispatch(changeRecommendsAction(recommends)) }) } }

import React, { PureComponent } from 'react' import { connect } from 'react-redux' import { fetchHomeMultidataAction } from '../store/actionCreators' export class Category extends PureComponent { componentDidMount() { this.props.fetchHomeMultidata() } render() { return ( 
 
Category Page
 ) } } const mapStateToProps = state => ({ counter: state.counter }) const mapDispatchToProps = (dispacth) => ({ fetchHomeMultidata: () => dispacth(fetchHomeMultidataAction()) }) export default connect(mapStateToProps, mapDispatchToProps)(Category)

import { createStore, applyMiddleware, compose } from "redux" import thunk from "redux-thunk" import reducer from "./reducer" // redux-devtools const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({trace: true}) || compose; const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk))) export default store 复制代码

import { createStore, applyMiddleware, compose, combineReducers } from "redux" import thunk from "redux-thunk" import counterReducer from './counter' import homeReducer from './home' import userReducer from './user' // 将reducer合并到一起 const reducer = combineReducers({ counter: counterReducer, home: homeReducer, user: userReducer }) // redux-devtools const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({trace: true}) || compose; const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk))) export default store

// combineReducers 原理 function reducer(state = {}, action) { // 返回一个对象，store中的state return { counter: counterReducer(state.counter, action), home: homeReducer(state.home, action), user: userReducer(state.user, action) } }