import React from 'react';
import { createStore } from 'redux';
const counter = (state = 0, action) => {
switch (action.type) {
case 'incement':
return state + 1;
case 'decment':
return state - 1;
default:
return state;
}
};
const store = createStore(counter);
const connect = (store, ReactClassOrFunctionalComponent) =>
class ProxyComponent extends React.Component {
unsubscribe = null;
constructor(props) {
super(props);
this.state = {
value: store.getState(),
};
}
componentDidMount() {
this.unsubscribe = store.subscribe(() => {
this.setState({ value: store.getState() });
});
}
componentWillUnmount() {
this.unsubscribe && this.unsubscribe();
}
render() {
return (
<ReactClassOrFunctionalComponent
$store={store}
value={this.state.value}
/>
);
}
};
class MyClassCounter extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<p>{this.props.value}</p>
<button onClick={() => this.props.$store.dispatch({ type: 'decment' })}>
Click me
</button>
</div>
);
}
}
const MyFunctionalCounter = (props) => {
return (
<div>
<p>{props.value}</p>
<button onClick={() => props.$store.dispatch({ type: 'incement' })}>
Click me
</button>
</div>
);
};
const ReduxMyClassCounter = connect(store, MyClassCounter);
const ReduxMyFunctionalCounter = connect(store, MyFunctionalCounter);
console.log(ReduxMyClassCounter);
export default function App() {
return (
<div>
<strong>Hello world!</strong>
<ReduxMyClassCounter />
<ReduxMyFunctionalCounter />
</div>
);
}
Redux
最新推荐文章于 2024-09-12 17:09:29 发布