Redux-thunk：自動創建動作創建者

Question

我有減速器：

import sliderInitialConfig from '../fixures';

export default (sliderConfig = sliderInitialConfig, action) => {
    const {type, payload} = action;
    switch(type) {
        case "SELECT_CONFIG":
            console.log(sliderConfig);
            return sliderConfig.filter(item => item.id === payload);

        default:
            return sliderConfig;
    }
}

我有動作創建者（使用redux-thunk）

export const selectConfig = (id) => dispatch => {
  dispatch({type: "SELECT_CONFIG", payload: id})
};

我在使用AC的JSX代碼中有一部分。

 {
    sliderElements.map(item =>
       <li
       key={item.id}
       className="btn"
       onClick={this.props.selectConfig(item.id)}
       >
       {item.device}
       </li>
  )
 }

因此，當我在瀏覽器中加載項目時，此AC將自動調用，而不是元素數組，而是收到空數組，如下所示：

{sliderElements: Array(4), fetchUser: ƒ, handleToken: ƒ, submitSurvey: ƒ, scrollMovement: ƒ, …}
sliderElements.js:7 (4) [{…}, {…}, {…}, {…}]0: {id: 1, device: "Apple iMac", image: "/static/media/mac_monitor.931c27aa.svg"}1: {id: 2, device: "Apple Macbook Pro", image: "/static/media/mackbook_pro.c9315d2b.png"}2: {id: 3, device: "MSI GP72VR 7RFX", image: "/static/media/iphone_X.bebbd7bc.jpg"}3: {id: 4, device: "Iphone X", image: "/static/media/msi_laptop.8190feed.jpg"}length: 4__proto__: Array(0)
sliderElements.js:7 [{…}]0: {id: 1, device: "Apple iMac", image: "/static/media/mac_monitor.931c27aa.svg"}length: 1__proto__: Array(0)
sliderElements.js:7 []
sliderElements.js:7 []
BlockFive.js:14 {sliderElements: Array(0), fetchUser: ƒ, handleToken: ƒ, submitSurvey: ƒ, scrollMovement: ƒ, …}

Answer 1

       <li
       key={item.id}
       className="btn"
       onClick={this.props.selectConfig(item.id)}
       >
       {item.device}
       </li>

在這里，您正在調用 selectConfig函數。 您想將此函數傳遞給onClick屬性，但不調用它。 您還想定義要用作輸入值的值。 有兩種主要方法可以做到這一點；

1. 咖喱;

    getSelectConfig(id) => () => this.props.selectConfig(id) ... onClick={this.getSelectConfig(item.id)} 

2. 捆綁;

    onClick={this.selectConfig.bind(this, item.id)}