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

【问题标题】：Redux persist does not change my desired dataRedux persist 不会改变我想要的数据
【发布时间】：2021-10-01 00:47:21
【问题描述】：

我正在尝试将 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: {…}} 对象。是的，我需要为这个项目使用基于类的组件。

【问题讨论】：

标签： reactjs redux react-redux local-storage redux-persist

【解决方案1】：

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

所以我需要按如下方式更改reducer：

// 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)的情况下，它将以type返回'NEW'，tokenReducer将返回一个以action.payload作为token属性值的对象，其值将是tokenValue当我打电话给this.props.setToken(tokenValue) 时，我通过了。至于clearToken，它将以type 的形式返回'EMPTY'，因此tokenReducer 将返回一个将token 设置为null 的对象。

【讨论】：