react-redux基本使用

Posted 2023-02-26 усил

创建 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;