redux官方文档学习，以及一些小案例

矫情吗；* 2022-04-04 11:47 180阅读 0赞

一、官方文档学习

1.学习网址：[https://cn.redux.js.org/][https_cn.redux.js.org]

2.一张图带你理解redux

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

3.核心概念

要想更新 state 中的数据，你需要发起一个 action。下面是一些 action 的示例：

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
    { type: 'TOGGLE_TODO', index: 1 }
    { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

为了把 action 和 state 串起来，开发一些函数，这就是 reducer。reducer 只是一个接收 state 和 action，并返回新的 state 的函数。

再开发一个 reducer 调用这两个 reducer，进而来管理整个应用的 state

二、Redux学习

*  学习网址：[https://www.robinwieruch.de/the-soundcloud-client-in-react-redux/][https_www.robinwieruch.de_the-soundcloud-client-in-react-redux]
 *  Redux安装：

npm install --save redux

*  Redux引入：

*src/home/test.js*

import { connect } from 'react-redux'
    import { --- } from "../action/testtAction";

const mapStateToProp = state => ({
      ---: state.---.---/冒号前是代码中需要用到的值，(state.---.---)第一个是我们在总的reducers.js中用的const reducers定义的Store储存值的名称
    });
    const mapDispatchToProp = dispatch => ({
      ---: --- => dispatch(---(---)),/(---: ---)这里是action中需要用到的函数，冒号后面是需要传的值。dispatch(---(---))，前面是action中需要用到的函数，后面是传的值
      ---: (---,---) => dispatch(---(---,---)),
      ---: () => dispatch(---())
    });
    export default connect(
      mapStateToProp,
      mapDispatchToProp
    )(---);这个(---)是开头class --- extends Componentclass的类名

*  Constant Action Types

创建一个文件，s*rc/types/types.js*

export const --- = '---';/命名规则，前面这个全大写，后面这个全小写

*  Action Creators

*src/actions/testAction.js*

import * as TYPES from "../types/types";
    
    export function ---(---) {/这个取名和此段代码内的text:后的相同，此处是testReducer.js中定义的相关的initialState
      return {
        type: TYPES.---,/前面types.js中定义的全部大写的type
        text: ---/
      };
    }

*  Dispatching an Action

*src/actions/testAction.js*

import { --- } from "../graphql/queries";//引入graphql中需要用到的对应的query或者mutation
    import { graphqlOperation, API } from "aws-amplify";
    
    export function ---(---) {//---(---)前面是任意取得函数名，后面是前面test.js中传入的值
      return async dispatch => {
        const newEvent = await API.graphql(graphqlOperation(---));//graphql中需要用到的对应的query或者mutation
        if (newEvent) {
          dispatch(---(newEvent.data.---.---));
        }
      };
    }

*  reducer

*src/reducers/testReducers.js*

import * as TYPES from "../types/types";
    const initialState = {
      ---: [],
      ---:[]
    };
    
    export default function ---(state = initialState, action) {
      switch (action.type) {
        case TYPES.---:
           return{
             ...state,
             ---:action.text
           }
        case TYPES.---:
          return {
            ...state,
            ---: action.text
          };
        default:
          return state;
      }
    }

*  再创建一个reducer，将上面的多个reducer合并

*src/reducers/reducers.js*

import --- from "./---";
    import --- from './---';
    const reducers = {
      ---: ---,
      ---: ---
    };
    export default reducers;

三、小案例练习

1.学习网站：[https://github.com/reduxjs/redux][https_github.com_reduxjs_redux]

[https://github.com/reduxjs/redux/tree/master/examples][https_github.com_reduxjs_redux_tree_master_examples]

1.我想要做一个案例，点击之后，当前对应产品的id+1

2.在完成过程中出现问题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

解决办法：

npm install --save redux

3.首先搭建框架

*  新建一个reducers文件夹，然后是store文件夹，然后是action文件夹，然后是component文件夹
 *  在reducers文件夹中新建一个index.js文件
 *  index.js文件用来对所有reducer进行管理

import { combineReducers } from "redux";
    import testReducer from './testReducer'
    export default combineReducers({
        listStore:testReducer
    });

*  在store文件夹中新建一个storeConfig.js文件
 *  storeConfig.js

import thunkMiddleware from 'redux-thunk';
    import { applyMiddleware, createStore } from 'redux';
    import reducers from '../reducers/index'
    
    let createWebStore = applyMiddleware(thunkMiddleware)(createStore);
    
    export default function configureStore(initialState) {
        const store = createWebStore(reducers, initialState);
        return store;
    }

*  在管理所有配置的文件（一般是src目录下第一层index.js文件），页面的最外层加上store

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import configureStore from './store/storeConfig';
    import { Provider } from "react-redux";
    // import {
    //   ConnectedRouter,
    //   routerReducer,
    //   routerMiddleware
    // } from "react-router-redux";
    import { CookiesProvider } from "react-cookie";
    // import createHistory from "history/createBrowserHistory";
    const store = configureStore();
    // const history = createHistory();
    ReactDOM.render(
        <CookiesProvider>
          <Provider store={store}>
            {/* ConnectedRouter will use the store from Provider automatically */}
            {/* <ConnectedRouter history={history}> */}{/* 有router时才需要用到*/}
              <div id="root-div">
                <App />
              </div>
            {/* </ConnectedRouter> */}
          </Provider>
        </CookiesProvider>,
        document.getElementById("root")
      );
    serviceWorker.unregister();

*  上面的完成后，框架搭建基本完成。接下来大家就可以实践了

[https_cn.redux.js.org]: https://cn.redux.js.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220404/8d6e8b3a3b2748a380d85d15153c1c8f.png
[https_www.robinwieruch.de_the-soundcloud-client-in-react-redux]: https://www.robinwieruch.de/the-soundcloud-client-in-react-redux/
[https_github.com_reduxjs_redux]: https://github.com/reduxjs/redux
[https_github.com_reduxjs_redux_tree_master_examples]: https://github.com/reduxjs/redux/tree/master/examples
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20220404/a0142d10d621443cb5b752070b185b38.png