创建 store
import { createStore } from 'redux';
const defaultState = {
language: 'zh',
languageList: [
{ name: '中文', code: 'zh' },
{ name: '英文', code: 'en' }
]
}
const reducer = (state = defaultState, action) => {
switch (action.type) {
case "change_labguage":
return { ...state, language: action.payload };
default:
return state
}
}
const store = createStore(reducer);
export default store;
入口文件导入 store
import store from 'redux/index';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
在类组件中使用
import { connect } from 'react-redux';
// 将 store 中的数据注入到 props
const mapStateTopProps = (state) => {
return {
language: state.language,
languageList: state.languageList
}
}
// 将 dispatch 导入到 props
const mapDispatchToProps = (dispatch) {
return {
changeLanguage: (code) => {
const action = {
type: "change_language",
payload: code
}
dispatch(action);
}
}
}
class HeaderComponent extends React.Component {
menuClickHander = (e) => {
this.props.changeLanguage(e.key);
}
render() {
return (
<div className="header">
<Dropdown.Button
overlay={
<Menu onClick={() => this.menuClickHander} items={this.props.languageList.map(l => { return { key: l.code, label: l.name } })} />
}>{this.props.language === 'zh' ? '中文' : 'English'}</Dropdown.Button>
</div>
)
}
}
export const HeaderClass = connect(mapStateTopProps, mapDispatchToProps)(HeaderComponent);
在函数组件中使用
import { useSelector, useDispatch } from 'react-redux';
const HeaderFC = () => {
// 获取 store 数据
const language = useSelector(state => state.language);
const languageList = useSelector(state => state.languageList);
const dispatch = useDispatch();
const menuClickHander = (e) => {
const action = {
type: 'change_labguage',
payload: e.key
}
dispatch(action);
}
return (
<div className="header">
<Dropdown.Button
overlay={ <Menu
onClick={() => this.menuClickHander}
items={languageList.map(l => { return { key: l.code, label: l.name } })} />
}>{language === 'zh' ? '中文' : 'English'}
</Dropdown.Button>
</div>
)
}
export default HeaderFC;