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

一、官方文档学习

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

2.一张图带你理解redux

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/
• 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

创建一个文件，src/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/tree/master/examples

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

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

 

解决办法：

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();

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