Advertisement

Taro-react-redux 微信小程序

阅读量:

Taro-react-redux 微信小程序

基本步骤都在
https://nervjs.github.io/taro/docs/redux/

会有2个问题

  • 无法直接使用storage
  • PersistGate无法直接在app.tsx中使用

需要创建文件storage.ts,

复制代码
    import Taro from '@tarojs/taro';
    
    export default {
      getItem(key) {
    return Promise.resolve().then(() => {
      return Taro.getStorageSync(key)
    })
      },
    
      setItem(key, data) {
    return Promise.resolve().then(() => {
      return Taro.setStorage({ key, data })
    })
      },
    
      removeItem(key) {
    return Taro.removeStorage({ key })
      },
    
      clear() {
    return Taro.clearStorage()
      }
    }

在store.ts中

复制代码
    import { createStore, applyMiddleware, compose } from 'redux'
    import thunkMiddleware from 'redux-thunk'
    import { persistStore, persistReducer } from 'redux-persist';
    import rootReducer from '@/redux/index'
    import storage from './storage';
    
    const composeEnhancers =
      typeof window === 'object' &&
    //@ts-ignore
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    //@ts-ignore
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose
    
    const persistConfig = {
      key: 'root',
      storage, //在此处替换
      whitelist: ['user']
    };
    
    const persistedReducer = persistReducer(persistConfig, rootReducer);
    
    // 中间件存放此处
    const middlewares = [
      thunkMiddleware
    ]
    
    if (process.env.NODE_ENV === 'development' && process.env.TARO_ENV !== 'quickapp') {
      middlewares.push(require('redux-logger').createLogger())
    }
    
    const enhancer = composeEnhancers(
      applyMiddleware(...middlewares),
      // other store enhancers if any
    )
    
    export const store = createStore(persistedReducer, undefined, enhancer);
    
    export const persistor = persistStore(store);

在app.tsx中 使用 Provider

复制代码
    import React, { Component } from 'react';
    import { Provider } from 'react-redux';
    import { setSystemInfo } from '@/utils';
    import { store } from './store';
    import './app.scss';
    
    class App extends Component {
      async componentDidMount() {
    setSystemInfo();
      }
    
      componentDidShow() { }
    
      componentDidHide() { }
    
      componentDidCatchError() { }
    
    
    
      // 在 App 类中的 render() 函数没有实际作用
      // 请勿修改此函数
      render() {
    return (
      <Provider store={store}>
        {this.props.children}
      </Provider>
    )
      }
    }
    
    export default App;

在pages/index/index.tsx中使用 PersistGate

复制代码
    <PersistGate loading={null} persistor={persistor} >
    	<View>home</View>
    </PersistGate>

全部评论 (0)

还没有任何评论哟~