Reactjs 更新值并将其保存在Redux中

我对redux非常陌生，仍然试图用它弄湿我的脚。我正在开发一个小型应用程序，它从端点获取数据并呈现项目。然后用户就可以锁定这些项目，这是我不确定的部分

在我的操作中，我设置了获取数据的逻辑

import {FETCH_POST} from './types';

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

我的减速器有条件处理这个动作

import {FETCH_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});
        default:
            return state;
    }

}

//Main reducer file

import {combineReducers} from 'redux';
import postReducer from './postReducer';

export default combineReducers({
   post: postReducer
});

这是我的组件

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

    pinPost(){
       //...not sure how to update here
    }

    render(){
        const postItems = this.props.posts.map(post => (
            <div key={post.data.id} className="listBox">
                <div className="listContent">
                    <i className="fa fa-thumb-tack pin" onClick={this.pinPost}></i>
                    <a href={'https://someapi' + post.data.permalink} target="_blank">{post.data.title}</a>
                </div>
            </div>
        ));

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

我的目标是通过点击图标来锁定帖子，然后在锁定部分而不是帖子部分下显示该帖子

this.props.posts数组由属性默认为pinted:false的对象以及与其关联的其他属性组成。如果固定，我希望将其设置为“true”，如果取消固定，则重置为“false”

---

我该怎么办？我需要另一个操作来处理这个问题吗？

想法是，首先需要在单击pin按钮时更新redux商店中特定帖子的pinted属性。为此，您需要使用onClick方法绑定唯一的属性post id，并使用该id分派一个操作

步骤：

1-将每个帖子的唯一id传递给pinPost方法：

onClick={this.pinPost.bind(this, post.data.id)}

2-分派操作以更新redux存储区中该帖子的固定属性：

pinPost(id) {
   this.props.updatePost(id)
}

3-将updatePost定义为：

updatePost(id) {
    dispatch({
        type: 'UPDATE_POST',
        id,
    })
}

4-现在更新该帖子的pinted属性：

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

5-现在在不同部分渲染元素：

render(){
    let pinnedPost = [], postItems = []
    this.props.posts.forEach(post => {
        if(post.data.pinned) {
            pinnedPost.push(
                <div key={post.data.id} className="listBox">
                    <div className="listContent">
                        <i className="fa fa-thumb-tack pin"></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}></i>
                        <a href={'https://someapi' + post.data.permalink} target="_blank">{post.data.title}</a>
                    </div>
                </div>
            )
        }

    ));

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

---

看起来你在使用redux thunk？@TrueWill是的，我在一个教程中遇到过，这是设置redux时样板文件的一部分。你想用这个pin更改服务器上的数据吗？或者只在客户端？在客户端，因为我计划对固定的项目使用localstorage来持久化数据。如果我还想取消固定帖子，它会需要一个新的操作吗？您可以为此使用单独的函数，但更好的方法是对这两种类型的操作使用相同的函数，与id一起，还可以在分派操作中传递值true/false，并设置pinted:value，而不是执行pinted:true: