问题:
解决方案:
关于redux使用:
1.建立index.js文件
import { legacy_createStore as createStore, combineReducers } from 'redux'
import xxxReducer from './xxxreducer'
const reducer = combineReducers({ // combineReducers引入多个处理器
xxxReducer: xxxReducer
})
export default createStore(reducer)
- 建立xxReducer.js文件
const initState = {
key: ''
}
export default function menuNameReducer (state = initState, action) {
const { type, date } = action;
switch (type) {
case '方法名':
return {
key: state.key
}
default:
return state
}
}
- App.jsx中导入
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.createRoot(document.getElementById('root')).render(
<Provider store={store}>
<App />
</Provider>
)
- 其他页面中提交方法
import { connect, useDispatch } from 'react-redux'
cont dispatch = useDispatch();
const onClick = () => {
dispatch({
type: 与xxReducer相同的方法名称,
key: value
)
}
4.其他页面获取xxxReducer的方法
import store from '../store'
console.log(store.getState().key) // 没有combineReducers的时候
console.log(store.getState().xxxReducer.key)