react-redux Redux-Toolkit和react-redux以及Hooks应用、react-redux的ts写法

1、配置
	npm install @reduxjs/toolkit react-redux
	npm install @types/react-redux		ts需要
	
2、配置reducer

	import { createSlice,PayloadAction } from '@reduxjs/toolkit'
	
	export const counterSlice = createSlice({
	  name: 'counter',
	  initialState: {	初始state		ts中,可通过initialState as x来放宽state的类型
	    value: 0,
	  },
	  reducers: {		对应之前的reducer+action
	    increment: (state) => {
	      state.value += 1;	内部使用immer,不需要创建新的数据返回
	    },
	    decrement: (state) => {
	      state.value -= 1;
	    },
	    incrementByAmount: (state, action:PayloadAction<类型>) => {	PayloadAction<类型>定义传入的参数的类型
	      state.value += action.payload
	    },
	  },
	})
  
    创建异步方法
    export const incrementAsync = amount => dispatch => {
	  setTimeout(() => {
	    dispatch(incrementByAmount(amount));	每一个action只能传递一个参数,方法内通过action.payload获取
	  }, 1000);
	};

	
	(1)counterSlice.actions包含reducers内的所有方法,用于在组件中调用改变state
	export const { increment, decrement, incrementByAmount } = counterSlice.actions
	
	(2)到处reducer
	export default counterSlice.reducer

3、配置store
	import { configureStore } from '@reduxjs/toolkit'
	import counterReducer from '../features/counter/counterSlice'
	
	const store= configureStore({
	  reducer: {
	    counter: counterReducer,
	  },
	})
	export default store
	
	当搭配ts时,可通过store来返回state和dispatch方法的类型
		export type RootState = ReturnType<typeof store.getState>
		export type AppDispatch = typeof store.dispatch
	
		useDispatch<AppDispatch>()
		或const x:AppDispatch= useDispatch()
		const useAppSelector:TypedUseSelectorHook<RootState> = useSelector	TypedUseSelectorHook来自react-redux
		或useSelector(state: RootState) => state.counter.value)

4、连接全局
	import store from './app/store'
	import { Provider } from 'react-redux'
	
	ReactDOM.render(
	  <Provider store={store}>
	    <App />
	  </Provider>,
	  document.getElementById('root')
	)

5、组件中使用
	import { useSelector, useDispatch,shallowEqual,useStore } from 'react-redux'
	import { decrement, increment, incrementAsync } from './counterSlice'		导入reducer内的action
	
	useSelector:从redux中读取数据并订阅更新
	useDispatch:分发action,改变reducer中的状态
	useStore:返回redux;	const store = useStore(); store.getState()
	
	const count = useSelector((state) => state.counter.value)
	或const count = useSelector((state) => state.counter.value,shallowEqual )	数据更新时,默认为===进行的深比较,第二个参数改为浅比较
	const dispatch = useDispatch()
	
	<button
      onClick={() => dispatch(increment())}		在connect方式下,dispatch({type:"XXX",...})
      onClick={() => dispatch(incrementByAmount(1))}
    >
      Increment
    </button>

6、使用之前的connect方式和reducer方式和之前相同,同时也能使用useSelector等hooks

	ts下对connect进行类型定义
	
	(1)使用ConnectedProps
	
   		import { connect, ConnectedProps } from 'react-redux'
   		const mapState = (state: RootState) => ({
		  isOn: state.isOn,
		})
		
		const mapDispatch = {
		  toggleOn: () => ({ type: 'TOGGLE_IS_ON' }),
		}
		const connector = connect(mapState, mapDispatch)
   		type PropsFromRedux = ConnectedProps<typeof connector>
   		
   		在组件中:
   		interface Props extends PropsFromRedux {
		  ...
		}
   		const MyComponent = (props: Props) => (
		  <div style={{ backgroundColor: props.backgroundColor }}>
		    <button onClick={props.toggleOn}>
		      Toggle is {props.isOn ? 'ON' : 'OFF'}
		    </button>
		  </div>
		)
		
		export default connector(MyComponent)
	
	(2)纯手动定义
	
		import { connect } from 'react-redux'

		interface StateProps {
		  isOn: boolean
		}
		
		interface DispatchProps {
		  toggleOn: () => void
		}
		
		interface OwnProps {
		  backgroundColor: string
		}
		
		type Props = StateProps & DispatchProps & OwnProps
		
		const mapState = (state: RootState) => ({
		  isOn: state.isOn,
		})
		
		const mapDispatch = {
		  toggleOn: () => ({ type: 'TOGGLE_IS_ON' }),
		}
		
		const MyComponent = (props: Props) => (
		  <div style={{ backgroundColor: props.backgroundColor }}>
		    <button onClick={props.toggleOn}>
		      Toggle is {props.isOn ? 'ON' : 'OFF'}
		    </button>
		  </div>
		)
		
		export default connect<StateProps, DispatchProps, OwnProps>(
		  mapState,
		  mapDispatch
		)(MyComponent)

	(3)使用ReturnType和typeof
	
		const mapState = (state: RootState) => ({
		  isOn: state.isOn,
		})
		
		const mapDispatch = {
		  toggleOn: () => ({ type: 'TOGGLE_IS_ON' }),
		}
		
		type StateProps = ReturnType<typeof mapState>
		type DispatchProps = typeof mapDispatch
		
		type Props = StateProps & DispatchProps & OwnProps