React+Redux

weixin_46412709

已于 2022-11-25 10:43:07 修改

阅读量203

点赞数

分类专栏： React.js 文章标签： react.js javascript 前端

于 2022-11-25 10:20:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46412709/article/details/128031618

版权

React.js 专栏收录该内容

4 篇文章

订阅专栏

1.Redux

import { createStore, combineReducers } from 'redux';
import { composeWithDevTools } from "redux-devtools-extension";
// Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。
// 多个对象可以用 combineReducers 进行整合
const reducer = combineReducers({
	source：Source
	token:Token
   // key:value 的形式
});
// 引入createStore，专门用于创建redux中最为核心的store对象
const store = createStore(reducer, composeWithDevTools())
//观察者
store.subscribe(() => {
});
export default store;

Redux-thunk中间件(支持异步)

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
 const store = createStore(
  reducers, 
  applyMiddleware(thunk)
);

export const getApi = () => {
  // 这里可以接收 dispatch 参数，直接使用，相当于调用 store.dispatch 方法
  return (dispatch) => {
    axios.get('/api')
      .then((res) => {
        const data = res.data
        const action = getInitListAction(data)
        dispatch(action)
      })
      .catch((error) => {
        console.log(error)
      })
  }
}
componentDidMount() {
   const action = getApi ()
   store.dispatch(action)
}

redux-persist

//引入createStore，专门用于创建redux中最为核心的store对象
import { createStore } from 'redux'
import {persistStore, persistReducer} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
//引入汇总之后的reducer
import reducers from './reducers'
 
import loading from '../redux/reducers/loading'
 
//在localStorge中生成key为root的值
const persistConfig = {
  key: 'root',
  storage,
  blacklist:['loading'],  //设置某个reducer数据不持久化，
  whitelist: ['user'] // 白名单 只存白名单列表里的  黑名单 除了黑名单列表 其他都存
}
 
const myPersistReducer = persistReducer(persistConfig, reducers)
 
const store = createStore(myPersistReducer)
 
const persistor = persistStore(store)
 
export {
  store,
  persistor
}

react-redux

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import "antd/dist/antd.css";
import "./i18n/configs";
import { Provider } from "react-redux";
import rootStore from "./redux/store";
import axios from "axios";
import { PersistGate } from "redux-persist/integration/react";

axios.defaults.headers["x-icode"] = "FB80558A73FA658E";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={rootStore.store}>
      <PersistGate persistor={rootStore.persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

import {connect} from 'react-redux'

const mapStateToProps = (state) => {
  return {
     topicList: state.getIn(['home', 'topicList'])
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getTopicList() {
      dispatch(getTopicList());
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);