react18配置react-redux+immer

react-redux配置经常过一段时间不写就会忘记，下次配置还要去翻文档，写篇文章记录一下

安装

npm install redux react-redux immer redux-thunk --save

配置

1.src目录创建store文件夹，store中创建index.js

index.js代码：

import { legacy_createStore, combineReducers, applyMiddleware } from 'redux'     
import headerReducer from './reducer/header'
//thunk用于调用异步接口
import thunk from 'redux-thunk'
//combineReducers用于拆分reducer，这里我只用到了headerReducer,可以扩展多个reducer
const reducer = combineReducers({
  header: headerReducer
})
const store = legacy_createStore(reducer, applyMiddleware(thunk))

export default store;

2.store文件夹中创建reducer文件夹，再创建header.js
header.js代码：

import { produce } from 'immer'

const defaultState = {
  focused: false
}

const reducer = (state = defaultState, action) => produce(state, (draft) => {
  switch(action.type) {
    case 'CHANGE_FOCUSED':
      draft.focused = action.value
      break;
    default:
      break;
  }
})

export default reducer

(action也可以单独拆分出来，这里就先不拆了)

3.使用store
src/index.js代码：

import { Provider } from 'react-redux';
import store from './store'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router />
    </Provider>
  </React.StrictMode>
);

这里只展示了store配置的代码

store的使用以及修改store中的数据

1.使用store中的数据

import { useSelector } from 'react-redux'
const Header = () => {
	const focused = useSelector((state) => {
	    return state.header.focused
	  })
	  return(<div>{focused}</div>)
}

2.修改store中的数据

import { useDispatch } from 'react-redux'
const Header = () => {
	 const dispatch = useDispatch()
	 const action = {
	    type: 'CHANGE_FOCUSED',
	      value: true
	    }
	    dispatch(action)
	 return(<div>dispatch</div>)
}

reducer中对数据的修改前面已经写了，至此配置结束