2017-12-25 12 views
0

を(私は「解析エラー」を取得しています)私のコードは次のようになります。Redux Reducer - この状態をオブジェクトとして保存するにはどうしたらいいですか?

import { SAVE_SEARCH } from '../actions/index'; 

export default function (state = [], action) { 
    switch (action.type) { 
    case SAVE_SEARCH: 
     return [...state, action.payloadTwo, action.payloadOne]; 
    default: 
     return state; 
    } 
} 

そして私は私の状態でこのような結果を得ている:それは作品

enter image description here

が、この配列です。

case SAVE_SEARCH: 
     return [...state, { action.payloadTwo: action.payloadOne }]; 

のでSEARCHTERMは、オブジェクトのキーとなり、データがオブジェクトキー値として保存されます:私はそうのように、オブジェクトに変更したいです。

しかし、このコードは私にエラーを与える: enter image description here

私はそれはあなたのために明らかである知っています。なぜ私はこれをこのようにコード化できないのですか?なぜ私は "解析エラー"を得ているのですか?


---------------

EDIT:彼の答えのために@marekfulする

多くの感謝!今それは動作します!

マイaction.jsコード:

import axios from 'axios'; 

export const SAVE_SEARCH = 'SAVE_SEARCH'; 

export function searchTest(query) { 
    const githubApi = `https://api.github.com/search/repositories?q=${query}&sort=stars&order=desc`; 
    const request = axios.get(githubApi); 
    return (dispatch) => { 
    request.then(({ data: dataFromGithub }) => { 
     dispatch({ type: SAVE_SEARCH, payloadOne: query, payloadTwo: dataFromGithub }); 
    }); 
    }; 
} 

減速コード:

import { SAVE_SEARCH } from '../actions/index'; 

export default function (state = [], action) { 
    switch (action.type) { 
    case SAVE_SEARCH: 
     const o = {}; 
     o[action.payloadOne] = action.payloadTwo; 
     return [...state, o]; 
    default: 
     return state; 
    } 
} 

結果:オブジェクトリテラルで

enter image description here

+0

** **プロパティ名の** **プロパティ名 –

答えて

2

、キーのみをすることができ、文字列リテラル(値はオブジェクト参照ences):)あなたは、しかし、配列表記を使用してオブジェクトのキーとしてオブジェクト参照や関数の戻り値を使用することができます(それはまだ文字列にする必要があり{"someKey": object.property}

let o = {}; 
o[action.payloadTwo] = action.payloadOne; 
return [...state, o]; 
+0

[OK]を、私は完全に理解していないと思うが、今私はこれを得ているので:0 {[オブジェクトオブジェクト]: "テスト"} – MountainConqueror

+0

[申し訳ありません、今すぐ動作します、私はすぐに私の質問でこれを編集します! – MountainConqueror

1

ES6とあなたが直接使用することができます: return [... state、{[action.payloadTwo]:action.payloadOne]}];

関連する問題