To be clear, Redux is a useful architecture, but it’s not a must. In fact, in most cases, you can use it, just react.
Someone once said that.
“If you don’t know if you need Redux, you don’t need it. “
Dan Abramov, the creator of Redux, added.
“You need Redux only when you encounter problems that react can’t solve. “
Redux tutorial
Return to business
How to use context + usereducer to do global state management like vuex
- First, create the project using create react app
npx create-react-app my-app
cd my-app
npm start
2. Create a state folder in the SRC directory. There is only one index.js file
src
| ---- state
| ------index.js
...
3. state> index.js The code is as follows
Import react, {usereducer} from "react" // import react,
const State = React.createContext () // create a context object to pass data to the component tree
//Define the change rules of reducer
const ADD = "ADD"
const DECREASE = "DECREASE"
function reducer(state, action) {
switch (action) {
case ADD:
return state + 1
case DECREASE:
return state - 1
default:
return state
}
}
//Define a component to wrap components that need to get shared data
const StateProvider = props => {
//Methods to get and set values. 0 is the default value
const [state, dispatch] = useReducer(reducer, 0)
/*Value is the data that the component tree can get. It passes a state value and a dispatch method
Dispatch is used to change the state*/
return
{props.children}
}
export {
State, StateProvider, ADD, DECREASE
}4. Only the state folder is left in the SRC directory, index.js Documents, App.js File, new components folder
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { StateProvider } from "./state"
ReactDOM.render(
,
document.getElementById('root')
);src/App.js
import React, { useContext } from "react"
import MyComponents01 from "./components/MyComponents01"
Import {state, add, reduce} from "." / state "// get the context object
export default function App() {
Const {dispatch} = usecontext (state) // get the dispatch
return <>
Counter:
dispatch(ADD)}>+1
dispatch(DECREASE)}>-1
>
}src/components/MyComponents01.js
import React, { useContext } from "react"
Import {state} from ". / state" // get the context object
export default function MyComponents01(){
//Take out the shared data state
const { state }=useContext(State)
return
Shared data: {state}
}Final effect
Under the provide component, all components can get the shared data,
It is also very simple to get the shared data. The context object is introduced
Use const {…} = usecontext (created context object) inside the component