安装:yarn add redux react-redux
1、定义store文件 store.js
import { createStore } from 'redux'; import reducer from './reducer'; const configureStore = () => createStore(reducer) export default configureStore;
2、定义reducer文件 reducer.js
const initialState = { menuName: '首页', current: '123123数据' } // eslint-disable-next-line import/no-anonymous-default-export export default (state = initialState, action) => { console.log('action', action) // 使用dispatch调用action中的方法会触发更新state 获取到action之后根据type的不同来更改不同的值 类似于action:{type: "SWITCH_MEUN", menuName: "订单管理"} switch (action.type) { case 'SWITCH_MEUN': return { ...state, // 保存上一个状态值的写法 menuName: action.menuName } case 'SWITCH_CURRENT': return { ...state, // 保存上一个状态值的写法 current: action.current } default: return { ...state } } }
3、使用Provider包裹 index.js (入口文件)
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Provider } from 'react-redux' import configureStore from './store/index' const store = configureStore() ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
4、实际使用
使用useDispatch调用action修改数据
使用useSelector获取数据
import React from 'react' import {useDispatch, useSelector} from 'react-redux' export default function Header() { const dispatch = useDispatch() const current = useSelector((state) => { return state.current }) const changeCurrent = ()=> { dispatch({ type: 'SWITCH_CURRENT', current: '修改后的current' }) } return ( <div> 子组件 <h3>{current}</h3> <button onClick={changeCurrent}>修改current</button> </div> ) }
原文地址:https://www.cnblogs.com/cazj/p/15186278.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。