Question

我正在学习如何使用Redux。我想用一个按钮创建一个简单的应用程序。单击按钮时，我想进行休息api调用，当响应返回时，需要显示响应内容。

我想要做的是在用户点击按钮时向Redux发送store.dispatch(CardAction.GET_CARDS)消息。我不想直接从按钮的onClick处理程序调用rest api。

当收到答案时，我打算同样：发送一个store.dispatch(CardAction.UPDATE_UI)的事件，并以某种方式在后台我要更新Redux的状态。

我希望这个概念与React + Redux一致。

我已经完成了一些JavaScript代码，但缺少部分代码。你能帮我把零件放在一起吗？

的index.jsp

<!DOCTYPE html>
<%@page session="false"%>
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <base href="${pageContext.request.contextPath}/" />
        <link rel="icon" type="image/x-icon" href="public/image/favicon.ico">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
    </head>
    <body>
        <div id="root"></div>
        <script type="text/javascript" src="bundle.js"></script>
    </body>
</html>

App.js

let store = createStore(reducers);

ReactDom.render(
    <Provider store={store}>
        <Card/>
    </Provider>,
    document.getElementById('root')
);

Card.js

export default class Card extends React.Component {
    render() {
        return (
            <div>
                ...
                <Button onClick={() => store.dispatch(CardAction.GET_CARDS)}>rest call</Button>
            </div>
        )
    }
}

ActionType.js

export const GET_CARDS = 'get-cards';
export const UPDATE_UI = 'update-ui';

CardAction.js

export function getCards(param1, param2) {
    return createAction(ActionType.GET_CARDS, (param1, param2) => ({ value1, value2 }))
}

export function updateUi() {
    return createAction(ActionType.UPDATE_UI)
}

RootReducer.js

export const reducers = (state = {}, action) => {
    return action
};

RestClient.js

export default {
    cardPost(param1, param2) {
        const url = ...;

        fetch(url, {
            method: 'POST',
            credentials: 'include'
        })
            .then(response => {
                if (response.ok) {
                    console.info('rest response have arrived');
                    store.dispatch(CardAction.UPDATE_UI)
                } else {
                    console.info('error appeared during calling rest api');
                    //store.dispatch(CardAction.SHOW_ERROR)
                }
            })
            .catch(function(err) {
                console.info(err + ' Url: ' + url)
            })
    }
}

Answer 1

您永远不应该从组件中调用store.dispatch（）。相反，您应该导入以前构建的操作，并让redux流程执行剩余的其他操作。减速器不应该返回一个动作，而应该返回一个新的状态，而不会使前一个状态静音。我建议您首先要解决一些可理解的对redux缺乏经验的问题，然后您可以尝试按照这样的React-Redux-Rest教程进行操作：https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.cnat3gbcx

[编辑] 这就是我要做的事情

＆＃13;

// component Card.js
import {getCards} from "CardAction";

export default class Card extends React.Component {
    render() {
        return (
            <div>
                ...
                <Button onClick={getCards(param1, param2)}>rest call</Button>
            </div>
        )
    }
}

// action CardAction.js
const receivedCards = (cards) => ({
	type: "RECEIVED_CARDS",
	cards
})

export function getCards(param1, param2) {
    // idk where you're gonna use these params btw
    // also please note that fetch() isn't supported by older browsers. Here I'm showing you a simple example with axios, which basically performs the same operation. Feel free to adapt this example code as you want.
	return function(dispatch) {
		return axios({
			url: server + "endpoint",
			timeout: 20000,
			method: 'get'
		})
		.then(function(response) {
			let cards = response.data;
			dispatch(receivedCards(cards));
		})
		.catch(function(response){
			console.log(response.data.error);
		})
	}
};

// reducer reducer.js
const initialState = {};
export default (state = initialState, action) => {
  switch(action.type) {
    case "RECEIVED_CARDS":
      return Object.assign({},
        state,
        {cards: action.cards});
    default:
      return state;
  }
}

＆＃13;

使用react + redux休息

1 个答案: