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)
还没有任何评论哟~
