Redux persist 不会改变我想要的数据

Question

我正在尝试将 Redux-Persist 与 ReactJs 结合使用。我想使用 redux persist 将令牌保存到本地存储。我只有一个减速器，用于创建持久化减速器。我希望能够在使用 connect 连接的子组件中使用 this.props.token 访问令牌。但是，this.props.token 给了我一个像这样的对象 {_persist: {…}}.

这是我的相关配置

减速器,

const tokenReducer = (state=null, action) => action.payload;

操作，

// use when a token is received after logging in
export const setToken = (token) => {
    return {
        type: 'NEW',
        payload: token
    }
}

// use if login has failed
export const clearToken = () => {
    return {
        type: 'EMPTY',
        payload: null
    }
}

存储和持久化，

const persistConfig = {
    key: 'root',
    storage: storage,
};

const persistedReducer = persistReducer(persistConfig, tokenReducer);

const myStore = createStore(
    persistedReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

const myPersistor = persistStore(myStore);

store 和 persistor 被传递的组件，

export default class App extends Component {
    render() {
        return (
            <Provider store={myStore}>
                <PersistGate loading={<p>loading...</p>} persistor={myPersistor}>
                    <div>
                        <HomePage />
                    </div>
                </PersistGate>
            </Provider>
        );
    }
}

HomePage组件需要获取或更改token，

// the component that it is connected to
// wil have token as a prop
const mapStateToProps = state => ({
    token: state
});

// the component that it is connected to
// will have setNewToken and clearToken as props
// object structure {a, b} equivalent to {a: a, b: b}
const mapDispatchToProps = () => ({
    setToken,
    clearToken
});

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

我是不是做错了什么？我需要持久地存储令牌并以某种方式检索它。另外，如果我排除 redux-persist 并且只使用 redux 进行临时存储，那么它会按预期工作并且我得到了令牌。只有当我包含 redux-persist 变量时 this.props.token 才会给我 {_persist: {…}} 对象。是的，我需要为此项目使用基于 class 的组件。

Answer 1

已解决！我发现状态将始终是以下 Javascript 对象： const tokenReducer = (state=null, action) => action.payload;

所以我需要按如下方式更改减速器：

// if there is a token, return it
// otherwise return null
const tokenReducer = (state=null, action) => {
    switch(action.type){
        case 'NEW':
            return {
                token: action.payload
            };
        default:
            return {
                token: null
            };
    }
};

在mapStateToProps中，每次触发时，我都错误地将整个状态对象分配给token，如下所示：

// the component that it is connected to
// wil have token as a prop
const mapStateToProps = state => ({
    token: state
});

我应该像这样分配状态对象的令牌属性：

// the component that it is connected to
// will have token as a prop
const mapStateToProps = state => ({
    token: state.token
});

解释：

在主页中，我现在可以调用 this.props.token 来获取当前存储的令牌。为了更改或删除令牌，我可以分别调用 this.props.setToken(tokenValue) 和 this.props.clearToken。

在 setToken(tokenValue) 的情况下，它将 return 'NEW' 为 type 而 tokenReducer 将 return 具有 [= 的对象21=] 作为 token 属性的值，其值将是我调用 this.props.setToken(tokenValue) 时传递的 tokenValue。至于 clearToken，它将 return 'EMPTY' 为 type，因此 tokenReducer 将 return 一个 token 设置为 null 的对象.

Redux persist 不会改变我想要的数据

Redux persist does not change my desired data

local-storage

reactjs

redux

react-redux

redux-persist