react-redux的基本使用

 

目录

1.安装包

2.Reducer与store

3.在函数组件使用 react-redux

4.在类组件使用react-redux

5. 中间件的使用

---

1.安装包

npm install react-redux@7.2.2
npm install @types/react-redux@7.1.15 --save-dev

import { Provider } from 'react-redux'
import store from './redux/store'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

2.Reducer与store

reducer文件夹中创建language文件夹

languageReducer.ts

const defaultState: languageState = {
  language: 'zh',
  languageList: [
    { name: '中文', code: 'zh' },
    { name: 'English', code: 'en' },
  ],
}

export default (state = defaultState, action: any) => {
    witch (action.type) {
    case "change_language":
      return { ...state, language: action.payload } //新数据代替旧数据，把新的state给store
    case "add_language":
      return {
        ...state,
        languageList: [...state.languageList, action.payload],
      };
    default:
      return state;
  }
     //对象包括：
    //	language: 'en',
  	 //	languageList: [
     //	{ name: '中文', code: 'zh' },
     //	{ name: 'English', code: 'en' },
  	 //	],
}

store.ts

把在reducer处理好的返回的state，存储在store中

import { createStore, combineReducers } from 'redux'
import languageReducer from './language/languageReducer'

//利用combineReducers结合多个reducer
const rootReducer = combineReducers({
  language: languageReducer,
})
const store = createStore(rootReducer)

export default store

3.在函数组件使用 react-redux

useSelector获得store里面的state数据

useDispatch 派遣action

//hooks,获得store里面的state数据
import { useSelector } from 'react-redux'
//hooks,action通过这个hooks派遣
import { useDispatch } from 'react-redux'

export const Header: React.FC = () => {
    const language = useSelector((state: any) => state.language.language)
    const languageList = useSelector((state: any) => state.language.languageList)
    const dispatch = useDispatch()

    const CHANGE_LANGUAGE = 'change_language';
    const ADD_LANGUAGE = 'add_language';
    const changeLanguageActionCreator = (languageCode: any) =>{
       return {
            type: CHANGE_LANGUAGE,
            payload:languageCode,
        };
    }
   const addLanguageActionCreator = (name: string, code: string) =>{
       return {
            type: ADD_LANGUAGE,
            payload: { name, code },
        }
    }

  const menuClick = (e: any) => {
    if (e.key == '添加新语言') {
      const action = addLanguageActionCreator('new_lang', '新语言')
      dispatch(action)
    } else {
      const action = changeLanguageActionCreator(e.key)
      dispatch(action)
    }
  }
}

4.在类组件使用react-redux

1.通过connect 把组件和store里的state与dispatch连接起来

import {connect} from "react-redux"
 
class HeaderComponent extends React.Component{
 
}
export const Header = connect()(HeaderComponent)

2.流入：写入参数mapStateToprops，拿到数据，放在了HeaderComponent类组件中的props中

import {connect} from "react-redux"
 
//state是store里面的数据
const mapStateToProps = (state) => {
return {
    language: state.language.language,
    languageList: state.language.languageList
 }
}
 
class HeaderComponent extends React.Component{
 
}
 
//参数1mapStateToprops，将store的数据，绑定在类组件中的props
export const Header = connect(mapStateToprops)(HeaderComponent)

//可以通过props拿到数据，
this.props.language

3.流出： dispatch

第二个参数mapDispatchToProps，通过connect注入HeaderComponent类组件中的props

export const Header = connect(mapStateToprops, mapDispatchToProps)(HeaderComponent)

.定义这个参数，返回一个dispatch的函数

const mapDispatchToProps = (dispatch: any) =>{
    return {
        addLanguage : (code: any, name: string) => {
            const action  = {
                type:'add_language',
                payload:{coed, name}
            },      
            dispatch(action);
        }
    }
}
 

调用  mapDispatchToProps 里的 addLanguage 派遣

//通过props拿到addLanguage 方法，派遣
this.props.addLanguage ()
 
menuClickHandler = (e) => {
      // 处理新语言添加action
      this.props.addLanguage ("新语言", "new_lang");
  };

5. 中间件的使用

actionLog.ts

import { Middleware } from 'redux'

export const actionLog: Middleware = (store) => (next) => (action) => {
  console.log('state 当前', store.getState())
  console.log('fire action ', action)
  //派请action，更新store
  next(action)
  console.log('state 更新', store.getState())
}

store.ts

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { actionLog } from './middlewares/actionLog'；
import thunk from 'redux-thunk'；

const rootReducer = combineReducers({
  language: languageReducer,
})
//引入applyMiddleware thunk，创建中间件
const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk, actionLog))
)