访问Redux中的商店?

时间:2018-06-19 19:35:33

标签: reactjs redux immutable.js

我有一个使用immutablejs的react和redux项目。看起来像这样:

页面看起来像这样:

$sql = "UPDATE users SET user_blocked='No' WHEN user_blocked='Yes' AND 
user_blocked='Yes' WHEN user_blocked='No' WHERE user_id='$user_id'";

api:

function mapStateToProps(state) {
return {
    content: state.content
 }
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(thunks, dispatch)
    };
}


class ConnectedConnect extends Component {

 componentDidMount() {
    const { actions } = this.props
    actions.retrieveContent();
    console.log(this.props.content)
}
render() {
    return (
        <div>
            <Header heading="Demo Heading" colour="orange" disableAnimation={false} />

        </div >
    );
    }
}

`const Content = connect(mapStateToProps, mapDispatchToProps)`(ConnectedConnect);

export default Content

动作:

export function viewContent() {
    return fetch("http://localhost:8080/watchlist/content",
        {
            method: "GET",

        }).then(function (response) {
            if (!response.ok) {
                throw Error(response.statusText);
            }
            // Read the response as json.)
            return response.json();
        })
        .catch(function (error) {
            console.log('Looks like there was a problem: \n', error);
        })

}

减速器:

export function contentSuccess(retrieveContentWasSuccessful) {
    return { type: types.RETRIEVE_CONTENT_SUCCESS, contentSuccess };
}

export function retrieveContent() {
    // make async call to api, handle promise, dispatch action when promise is resolved
    return function (dispatch) {
        return viewContent().then(retrieveContentWasSuccessful => {
            dispatch(contentSuccess(retrieveContentWasSuccessful));
        }).catch(error => {
            throw (error);
        });
    };
}

商店本身就是这样:

export function contentReducer(state = fromJS({}), action) {
    switch (action.type) {
        case types.RETRIEVE_CONTENT_SUCCESS:
            return state.merge(action.content)
        default:
            return state;
    }
};

已成功调用api。但是我似乎无法在商店中实际访问响应!感谢您对此的任何帮助! 谢谢!

1 个答案:

答案 0 :(得分:1)

认为您想在此处传递retrieveContentWasSuccessful而不是contentSuccess

export function contentSuccess(retrieveContentWasSuccessful) {
    return { type: types.RETRIEVE_CONTENT_SUCCESS, retrieveContentWasSuccessful };
}