react統合原生redux(二)

react統合原生redux(二)
前言
react統合原生redux(一)では基本的なアプリケーションフレームワークが完成しているが,actionを配布する際にはactionにロジックを書くことはできない,換言すればactionは常にjsonオブジェクトであり,関数ではなく,ビューライフサイクル内にロジックメソッドを書くことでstateの数値を変えることができるが,これまではプロジェクトが肥大化し,メンテナンスが困難になる.react-thunkミドルウェアは
プロジェクトの作成
参照react統合原生redux(一)
依存パッケージの追加yarn add redux-thunk -s
srcファイルディレクトリ
|-app.js|-store.js|-index.js|-actions.js actions.js ， action
action.jsコンテンツ

// actions.js
/**
 * redux-thunk action       ，       dispatch   
 *     
 * function () {
 *  return function (dispatch) {
 *    dispatch(...)
 *  }
 * }
 */
export const fetchListAction = param => {
  return dispatch => {
    //           (fetch,axios )
    new Promise(resolve => {
      setTimeout(() => {
        const data = {
          code: 0,
          msg: "ok",
          data: {
            list: ["hello", "thunk"],
            param
          }
        };
        resolve(data);
      }, 2000);
    }).then(result => {
      dispatch({ type: "SAVE", payload: result.data });
    });
  };
};

store変更 redux-thunk
完全なコード

// store.js
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension"; //chrome redux    

// state   
const initState = {
  list: ["a", "b"]
};

// reducer  
const reducer = (state = initState, action) => {
  const { type, payload } = action;
  // action type  
  if (type === "SAVE") {
    return Object.assign({}, state, payload);
  }
  return state;
};

/**
 *    store
 *   1： reducer
 *   2：    
 */
export default createStore(
  reducer,
  composeWithDevTools(applyMiddleware(thunk))
);

app.jsで呼び出す
主にこの部分です

useEffect(() => {
    store.dispatch(fetchListAction({ id: 1 }));
}, []);

完全なコード

// app.js
import React, { useState, useEffect } from "react";
import store from "./store";
import { fetchListAction } from "./actions";

export default () => {
  //   store  state，   hook  ，  this.setState(store.getState())
  const [state, setState] = useState(store.getState());
  useEffect(() => {
    // store    ， state  store.dispatch  action          
    store.subscribe(() => {
      setState(store.getState()); //      state  ，     
    });
  }, []); // []       

  //             
  useEffect(() => {
    store.dispatch(fetchListAction({ id: 1 }));
  }, []);

  const { list } = state;

  const addList = () => {
    list.push(Date.now());
    store.dispatch({ type: "SAVE", payload: { list } }); //     action   
  };

  return (
    

      add
      

        {list.map(v => {
          return 
{v}
;
        })}
      
    
  );
};

これにより、一般的な中小規模プロジェクトのニーズに対応し、完全なコードを表示できます.
一般的に大型プロジェクト用redux-sagaはreact統合原生redux(三)を参照