Redux application and dynamic binding

Create store.js data

Export const defaultValue = {visible: false, getCount: 11, list: [{aa: 222, bb: 333, cc: 2222 }, { aa: 222, bb: 333, cc: 2222 } ] } // action export const reducer = (state = defaultValue, action) => { switch (action.type) { case 'changeVisible': return Object.assign({}, state, { visible: action.value }) case 'changeTime': return Object.assign({}, state, { getCount: 'hello' }) default: } // Note: Export const store = createStore(Reducer) export const store = createStore(Reducer)Copy the code

Creating Component A

import React, { useState } from 'react' import B from './B' import store './store.js export default function A() { const [state, SetState] = useState(store.getState()) const watchState = () => {setState(store.getState()) stores.subscribe(() => { watchState() }) return ( <div> <buttom onClick={() => { store.dispatch({ type: 'changeVisible' value: 'A component change the value of the'})}} > changeA < / buttom > < p > A: {state. The visible} < / p > < / B > < / div >)}Copy the code

Create component B

import React, { useState } from 'react' import store './store.js export default function B() { const [state, SetState] = useState(store.getState()) const watchState = () => {setState(store.getState()) stores.subscribe(() => { watchState() }) return ( <div> <buttom onClick={() => { store.dispatch({ type: <p>B:{state.visible}</p> </div>)}Copy the code