Taro项目里用了Redux，为什么页面跳转回来状态就没了？

这个问题其实跟Taro和Redux的结合使用有关系，但不是Taro的路由机制销毁了store，而是你的store实例在页面切换时被重新创建了。具体来说，问题出在你导出store的方式上。

你在store/index.js里直接导出了一个createStore生成的store实例，但Taro的页面组件在每次跳转回来时可能会重新加载，导致store被重新初始化，状态自然就丢了。

要解决这个问题，你可以用一个单例模式来确保整个应用只有一个store实例。代码可以这么改：

import { createStore } from 'redux';

import rootReducer from './reducers';



let store;



export function getStore() {

  if (!store) {

    store = createStore(rootReducer);

  }

  return store;

}

然后在需要用store的地方调用getStore()方法，而不是直接导入store对象：

import Taro from '@tarojs/taro';

import { connect, useDispatch } from 'react-redux';

import { getStore } from '@/store';



function PageA() {

  const dispatch = useDispatch();

  // 使用dispatch更新状态

}



export default connect()(PageA);

另外，如果你觉得这样还不够保险，可以用redux-persist这个插件来做状态持久化，它可以把Redux的状态存到本地存储里，页面来回跳转也不怕丢状态了。配置起来也很简单：

import { createStore } from 'redux';

import { persistStore, persistReducer } from 'redux-persist';

import storage from 'redux-persist/lib/storage';

import rootReducer from './reducers';



const persistConfig = {

  key: 'root',

  storage,

};



const persistedReducer = persistReducer(persistConfig, rootReducer);



let store;

let persistor;



export function getStore() {

  if (!store) {

    store = createStore(persistedReducer);

    persistor = persistStore(store);

  }

  return { store, persistor };

}

记得在应用入口文件里把PersistGate加上，这样状态就能自动恢复了。

最后吐槽一句，Redux的状态管理本来就够折腾了，再加上Taro这种框架的特殊性，真是让人头大。不过按上面的方法改，问题应该能解决了。如果还有别的坑，咱们再接着聊。

这个问题我之前也踩过坑，说白了就是Taro的页面组件在切换时会被卸载掉，默认情况下Redux的状态是不会跟着丢失的，但如果你没有正确配置store或者页面连接方式有问题，就会出现这种现象。

首先，你代码里有个很明显的隐患，import store from '@/store' 这种写法没问题，但你在每个页面里都单独引入了store，而不是通过Taro的全局Provider统一注入。如果store没有被全局提供，页面切换的时候可能会导致状态不一致甚至重置。

解决方法很简单，你需要在应用的入口文件（通常是 app.js 或 app.ts）里用 Provider 把store注入到整个应用中，像这样：

import Taro, { Component } from '@tarojs/taro';

import { Provider } from 'react-redux';

import store from '@/store';

import App from './app';



class AppWrapper extends Component {

  render() {

    return (

      <Provider store={store}>

        <App />

      </Provider>

    );

  }

}



Taro.render(<AppWrapper />, document.getElementById('app'));

确保你的 Provider 包裹了整个应用，这样所有页面和组件都能共享同一个store实例，状态就不会因为页面切换而丢失了。

另外，你提到用的是Taro3，记得检查一下你的 config/index.js 文件里的路由配置，确保没有开启 optimization 相关的选项，比如 treeShaking 或者 pageStyleIsolation，这些选项可能会影响页面状态的保留。

最后，如果你发现状态还是不对劲，可以用一个简单的日志工具监听store的变化，看看是不是某些地方意外触发了状态重置。我自己就曾经因为某个中间件写错了，导致每次页面切换都会清空状态，差点崩溃。

别走弯路，按这个思路排查一遍，问题应该就能解决了。如果还有问题，可以再补充具体的现象，咱们继续聊。