发布时间:2024-07-14 19:33

阅读量:162

1.先创建count和person两个组件
2.创建count的store相关的文件夹。
store/modules/count
1.constant.js
2.createActions.js
3.index.js
4.reducer.js

index.js

import { legacy_createStore as createStore } from "redux";  import countReducer from "./reducer.js";  const countStore = createStore(countReducer);  export default countStore;

先写index.js 创建store，因为以后count组件的操作都是store.dospatch({type:xxx,data:xxx}),然后获取store是通过store.getState()
然后创建reducer.js

import { INCREMENT, DECREMENT } from "./constant"; const initialState = 0; function countReducer(preState = initialState, action) {   const { type, data } = action;   console.log("count reducer", type, data);   switch (type) {     case INCREMENT:       return preState + data;      case DECREMENT:       return preState - data;      default:       return preState;   } }  export default countReducer;

创建createActions.js

import { INCREMENT, DECREMENT, ASYNC_INCREMENT } from "./constant"; export function incrementAction(data) {   return { type: INCREMENT, data }; } export function decrementAction(data) {   return { type: DECREMENT, data }; }  export function asyncIncrementAction(data) {   setTimeout(() => {     return { type: ASYNC_INCREMENT, data };   }, 1000); }

constant.js

export const INCREMENT = "increment"; export const DECREMENT = "decrement"; export const ASYNC_INCREMENT = "asyncIncrement";

这个时候在count组件中通过store.getState()就可以获得值了，但是注意，页面是不会刷新的，所以我们要使用另外一个方法store.subscribe这个方法，当rudux里面的值发生改变，就会调用这个方法，执行里面的回调函数。

import React, { Component } from "react"; import store from "../store/modules/count"; import {   incrementAction,   decrementAction,   asyncIncrementAction, } from "../store/modules/count/createActions"; export default class Count extends Component {   state = { count: store.getState() };   componentDidMount() {     store.subscribe(() => {       const count = store.getState();       this.setState({ count });     });   }    increment = () => {     console.log(store.getState());     store.dispatch(incrementAction(1));   };   decrement = () => {     store.dispatch(decrementAction(1));   };   asyncIncrement = () => {     store.dispatch(asyncIncrementAction(1));   };   render() {     return (       <div>         <div>当前Count:{store.getState()}</div>         <button onClick={this.increment}>点我加1</button>         <button onClick={this.decrement}>点我减1</button>         <button onClick={this.asyncIncrement}>点我异步加1</button>         <hr />       </div>     );   } }

1.总结

使用redux的时候，
记住两点，redux里面是数据
组件中要使用store.dispacth(atction)来变更redux中的数据
组件通过store.getState()来获取里面的数据。
实现的化，只考虑store.js和reducer.js
store.js的创建就是公式。

import { legacy_createStore as createStore } from "redux";  import countReducer from "./reducer.js";  const countStore = createStore(countReducer);  export default countStore;

reducer.js就是一个纯函数，function countReducer(preState = initialState, action)

这个样子，基本reudx的使用就没问题了。

接下来还有异步的处理。
组件的store的dispatch里面只能是一个action，你dispatch里面是一个函数的化，是会报错的，这个时候，你需要让store执行这个函数，就需要用中间件。
下载redux-thunk

import { legacy_createStore as createStore, applyMiddleware } from "redux"; import thunk from "redux-thunk"; import countReducer from "./reducer.js";  const countStore = createStore(countReducer, applyMiddleware(thunk));  export default countStore;

给store.js使用中间件，这样子sotre.dispatch(fn)就没问题了，fn是一个异步函数。store收到这个函数，就会马上执行。并且会传入dispatch这个参数。
最终还是会dispatch一个action。store遇到这个action，就会调用reducer这个函数，传入当前的state和这个action。

export function asyncIncrementAction(data) {   return (dispatch) => {     setTimeout(() => {       dispatch(incrementAction(data));     }, 1000);   }; }