Redux和localStorage

我是Redux的新手，并没有找到任何有助于解释localStorage和Redux的具体示例 .

我目前正在开发一个迷你应用程序，我从 endpoints 获取数据并在页面上呈现 . 另外，我可以选择固定将在“固定”部分显示的帖子 .

我想将所有固定的帖子保存到localStorage中 . 当页面刷新时，我想显示所有固定的帖子，即使帖子不再从 endpoints 返回 .

在我当前的实现中，我可以获取数据并允许用户在固定和取消固定帖子之间切换 . 用户可以相应地在“固定”部分和“帖子”部分中查看帖子 .

My Post Component

class Post extends Component{
    componentWillMount(){
        this.props.fetchPost();
    }

    pinPost(id, val){
        this.props.pinPost(id, val)
    }

    render(){
        let pinedPosts = [];
        let postItems = [];

        this.props.posts.forEach(post =>{
            if(post.data.pinned){
                pinedPosts.push(
                    <div key={post.data.id} className="listBox">
                        <div className="listContent">
                            <i className='fa fa-thumb-tack pin' style={{color:"green"}} onClick={this.pinPost.bind(this, post.data.id, false)}></i>
                            <a href={'https://someapi' + post.data.permalink} target="_blank">{post.data.title}</a>
                        </div>
                    </div>
                );
            }else{
                postItems.push(
                    <div key={post.data.id} className="listBox">
                        <div className="listContent">
                            <i className="fa fa-thumb-tack pin" onClick={this.pinPost.bind(this, post.data.id, true)}></i>
                            <a href={'https://somepai' + post.data.permalink} target="_blank">{post.data.title}</a>
                        </div>
                    </div>
                );
            }
        });

        return(
            <div>
                <h1>Pinned</h1>
                {pinedPosts}
                <hr/>
                <h1>Posts</h1>
                {postItems}
            </div>
        );
    }
}

My Actions

import {FETCH_POST, PIN_POST} from './types';

export function fetchPost() {
    console.log('fetch..');
    return function (dispatch) {
        fetch('https://someapi/....')
            .then(res => res.json())
            .then(posts =>
                dispatch({
                    type: FETCH_POST,
                    payload: posts.data.children
                })
            )
        ;
    }
}

export function pinPost(id, val) {
    return function (dispatch) {
        dispatch({
            type: PIN_POST,
            id,
            val
        });
    }
}

My Reducer

import {FETCH_POST, PIN_POST} from '../actions/types';

const initialState = {
    items: [],
    item: {}
};

export default function(state = initialState, action){
    switch (action.type){
        case FETCH_POST:
            return Object.assign({}, state, {items: action.payload});
        case PIN_POST:
            const item = state.items.map(value => value.data.id === action.id ?
                {data: Object.assign({}, value.data, {pinned: action.val})} : value
            );
            return Object.assign({}, state, {items: item });
        default:
            return state;
    }

}

My Main Store

import { createStore,  applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};
const middleware = [thunk];

//... Do i handle the localStorage implementation here?

const store = createStore(rootReducer, initialState, applyMiddleware(...middleware));

export default store;

我不确定如何在页面刷新时将redux存储与本地存储中任何以前保存的状态进行保湿 .