redux-react-hook搭建简单react hook框架

新建项目

yarn create react-app hook-demo

启动项目

1. yarn build
2. 启动成功后删除项目中原有代码(此处不做说明)

安装库

1. yarn add redux-react-hook
2. yarn add redux

代码说明

此处代码仅展示具体组件中，需要操作全局变量，使得兄弟组件发生改变时的全局变量设置情况

项目目录展示

项目具体代码

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { makeStore } from './redux/Store';
import {  StoreContext } from 'redux-react-hook';
import * as serviceWorker from './serviceWorker';

const store = makeStore();
ReactDOM.render(
  <StoreContext.Provider value={store}>
    <App />
  </StoreContext.Provider>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

// App.js
import React, {useCallback } from 'react';
import { useDispatch, useMappedState } from 'redux-react-hook';

function App() {
  const mapstate = useCallback(state => state.user,[]);
  const user = useMappedState(mapstate);
  const dispatch = useDispatch();
  const btnClick = () => {
    dispatch({
      type: "SET_USER",
      user:"admin"
    })
  }
  //  拿到公共的值---只执行一次
  // const store = useContext(StoreContext);
  // StoreContext 从 redux-react-hook中引入
  // const initialUser = store.getState().user;

  // 拿到公共的值----实时变化
  // const mapState = useCallback(state => state.user,[]);
  // 获取数据并订阅存储
  // const user = useMappedState(mapstate);
  // 使用调度工具发出修改信息
  // const dispatch = useDispatch();
  // const buttonClick = () => {
  //   dispatch({
  //     type:"SET_USER",
  //     user: "jone"
  //   })
  // }

  return (
    <div>
      {user}
      <button onClick={btnClick}>点击</button>
    </div>
  );
}

export default App;

// Store.js
import { createStore } from 'redux';
import reducer from './Reducers';

export function makeStore() {
    return createStore(reducer, {
        user: "",
    })
}

// Reducers.js
export default function reducer(state, action) {
    switch(action.type) {
        case "SET_USER": {
            return {
                ...state,
                user: action.user
            }
        }
        default:
            return state
    }
}