react typesafe-actions

主要是为了，给redux,定义

文件夹---目录
index.tsx app首页
actions
	index 入口
	project.ts
reducers
	index 入口
	project.ts

index.tsx

import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { createLogger } from 'redux-logger'
import thunk from 'redux-thunk'
import reducer from './reducers'
// import { getAllProducts } from './actions'

const middleware:any[] = [ thunk ];
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger());
}

const store = createStore(
  reducer,
  applyMiddleware(...middleware)
)

 <Provider store={store}>
        <AppProvider>
          <DevTools />
          <BrowserRouter>
           <App />
          </BrowserRouter>
        </AppProvider>
       </Provider>

reducers/index.ts

import { combineReducers } from 'redux'
import { StateType } from 'typesafe-actions';
import {project} from './project'
import {project1} from './project1'
const reducers = {project,project1};
export type RootState = StateType<typeof reducers>;

export default combineReducers({
  project,
  project1
});

reducers/project.ts

import { action, ActionType,createAction } from 'typesafe-actions';

// with "import * as ..."
import * as todos from '../actions/project';
export type TodosAction = ActionType<typeof todos>;

export interface Project {
  visible:boolean,
  todos:any[]
}
const initialProject = {
  visible:false,
  todos:[]
}
export function project(
  state:Project = initialProject,
  action:TodosAction
):Project{
  console.log(action,'19');
  switch(action.type){
    case 'VISIBLE':
      return { ...state, visible: action.payload }
    case 'ADD_TODO':
      return { ...state,todos:[...state.todos,...action.payload]}
      default:
      return initialProject
  }
}

actions/index.ts

好像暂时，没用到
import { ActionType } from 'typesafe-actions';

import * as profileActions from './project';

export type ProfileAction = ActionType<typeof profileActions>;

export type RootAction = ProjectAction;

actions/project.ts

import { createAction } from 'typesafe-actions';
import { Dispatch } from 'redux';
// https://github.com/piotrwitek/typesafe-actions/blob/HEAD/src/create-action.spec.ts
// 这个链接，教你action如何定义和如何调用

// -设置抽屉显示 ，隐藏
export const drawerVisible1 = createAction('VISIBLE')<boolean>();
// drawerVisible1(true); // => { type: 'VISIBLE', payload: true }
//2种调用形式
//dispatch(drawerVisible1(true)) 
//dispatch({ type: 'VISIBLE', payload: true })

export const withPayload = createAction('ADD_TODO')<any>();
// withPayload(10); // => { type: 'CREATE_ACTION', payload: 10 }
//2种调用形式
//dispatch(withPayload(10)) 
//dispatch({ type: 'CREATE_ACTION', payload: 10 })

//移步 thunk
export const setTodos = (val: boolean) =>
  async (dispatch: Dispatch, getState: any) => {
    const { visible } = getState().project;
    dispatch(drawerVisible1(val));
  }

//异步 调用
//dispatch(setTodos(true))

在组件使用语法

import { useSelector, useDispatch } from "react-redux";
import { RootState } from '../../reducers';
import { withPayload } from '../../actions/project';

 const visible = useSelector((state:RootState) => state.project.visible);
 dispatch(withPayload([{name:'gpc'}]))

因为公司用的这个玩意，我不得不学
这里我也不想深入研究了，我准备在demo里面使用redux-toolkit了