Reactjs 如何从应用商店调用Redux操作功能?
我从store调用了Redux操作函数,但store.dispatch上显示错误 “类型错误:\网页包\导入的\模块\存储\ a.分派不是一个函数”” 应用商店代码:Reactjs 如何从应用商店调用Redux操作功能?,reactjs,redux,Reactjs,Redux,我从store调用了Redux操作函数,但store.dispatch上显示错误 “类型错误:\网页包\导入的\模块\存储\ a.分派不是一个函数”” 应用商店代码: import store from './store'; if (localStorage.getItem("persist:root")) { const persistData = localStorage.getItem("persist:root") const root = JSON.pa
import store from './store';
if (localStorage.getItem("persist:root")) {
const persistData = localStorage.getItem("persist:root")
const root = JSON.parse(persistData)
const field = JSON.parse(root.auth)
const expiresIn = field['authToken']["expiresIn"]
//check expire date
const currentTime = Date.now() / 1000;
if(expiresIn<currentTime){
store.dispatch(logoutUser());
window.location.href='/login';
}
}
创建存储:
const initialState = {};
const middleware = [reduxThunk];
const persistConfig = {
key: 'root',
storage,
whitelist: ['auth'],
blacklist: ['errors', 'profile', 'target']
};
const persistedReducer = persistReducer(persistConfig, rootReducer)
export default () => {
let store = createStore(
persistedReducer,
initialState,
composeWithDevTools(
applyMiddleware(...middleware),
)
);
let persistor = persistStore(store);
return { store, persistor };
};
Index.js:
import { Provider } from 'react-redux';
import configureStore from './store';
import { PersistGate } from 'redux-persist/integration/react';
const { persistor, store } = configureStore();
ReactDom.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
, document.querySelector('#root')
);
从'react redux'导入{Provider};
从“/store”导入配置存储;
从'redux persist/integration/react'导入{PersistGate};
const{persistor,store}=configureStore();
ReactDom.render(
,document.querySelector(“#root”)
);
所以除了store.js文件之外,创建一个单独的文件,称之为newStore.js
import configureStore from './store';
const { persistor, store } = configureStore();
export { persistor, store }
newStore.js
import configureStore from './store';
const { persistor, store } = configureStore();
export { persistor, store }
修改索引文件
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
--------------------------------
import { persistor, store } from './newStore'; //This is changed
--------------------------------
ReactDom.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
, document.querySelector('#root')
);
从'react redux'导入{Provider};
从'redux persist/integration/react'导入{PersistGate};
--------------------------------
从“/newStore”导入{persistor,store}//这是改变了
--------------------------------
ReactDom.render(
,document.querySelector(“#root”)
);
将应用商店代码修改为
import { store } from './newStore'; //This is changed
---------------------------
if (localStorage.getItem("persist:root")) {
const persistData = localStorage.getItem("persist:root")
const root = JSON.parse(persistData)
const field = JSON.parse(root.auth)
const expiresIn = field['authToken']["expiresIn"]
//check expire date
const currentTime = Date.now() / 1000;
if(expiresIn<currentTime){
store.dispatch(logoutUser());
window.location.href='/login';
}
}
从“/newStore”导入{store}//这是改变了
---------------------------
if(localStorage.getItem(“persist:root”)){
const persistData=localStorage.getItem(“persist:root”)
const root=JSON.parse(persistData)
const field=JSON.parse(root.auth)
常量expiresIn=字段['authToken'][“expiresIn”]
//检查过期日期
const currentTime=Date.now()/1000;
如果(过期)您可以共享创建存储的代码。好的,您可以显示您如何从该存储文件导入和创建AppStore中的存储吗?感谢您的回复,我添加了创建存储代码。在AppStore中,您如何导入存储
?我编辑代码,以便您可以查看我如何导入存储:)