Reux with Redux：不正な状態オブジェクトを返します

Question

React with Redux and Electronプロジェクトがあります。現在の画面IDをreduxに保存し、次の画面に保存された状態を取得しようとします。問題は、私はgetSettingsを使用する場合、戻り値は私の保存された状態でなければならないこと、である：

Object{settings: Object} 

が、アクションの対象である：

Object{type: "GET_SETTINGS", payload: ""} 

私はreducer_settings.jsするコンソールログを入れて、それがショー正しい状態。だから、それはgetSettingsメソッドを束縛しているようです。あなたの助けのおかげ

コンテナ/ screen_picker.js：

import React, {Component} from 'react'; 
import Navigation from "../components/navigation"; 
const {desktopCapturer, ipcRenderer} = require('electron'); 
import {connect} from 'react-redux'; 
const domify = require('domify') 
import App from '../components/app' 
import {bindActionCreators} from 'redux'; 
import {setSettings, getSettings} from "../actions/index"; 

class ScreenPicker extends App { 
    constructor(){ 
     super(); 
     this.showPicker(); 
    } 

    showPicker(){ 
     ipcRenderer.send('show-picker', { types: ['screen'] }); 

     ipcRenderer.on('get-sources', (event, options) => { 
      desktopCapturer.getSources(options, (error, sources) => { 
       if (error) throw error 
       let sourcesList = document.querySelector('.capturer-list') 
       for (let source of sources) { 
        let thumb = source.thumbnail.toDataURL() 
        if (!thumb) continue 
        let title = source.name.slice(0, 20) 
        let item = `<li><a href="#"><img src="${thumb}"><span>${title}</span></a></li>` 
        sourcesList.appendChild(domify(item)) 
       } 
       let links = sourcesList.querySelectorAll('a') 
       for (let i = 0; i < links.length; ++i) { 
        let closure = (i) => { 
         return (e) => { 
          e.preventDefault() 
          // ipcRenderer.send('source-id-selected', sources[i].id) 
          // sourcesList.innerHTML = '' 

          this.props.setSettings({ 
           screenId: sources[i].id 
          }); 
         } 
        } 
        links[i].onclick = closure(i) 
       } 
      }) 
     }) 
    } 

    render() { 
     return (
      <div className="window-wrapper"> 
       <div className="main-content"> 
        <div className="capturer-container dn"> 
         <div className="cr"> 
          <p className="mbl">Select the window you want to share:</p> 
          <ul className="capturer-list"></ul> 
         </div> 
        </div> 
       </div> 
       <Navigation nextRouteUrl="/camera-test" backRouteUrl="/" /> 
      </div> 
     ) 
    } 

} 

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

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({setSettings, getSettings}, dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(ScreenPicker); 

コンテナ/ camera_test.js

const {ipcRenderer} = require('electron'); 
import React, {Component} from 'react'; 
import Navigation from "../components/navigation"; 
import {connect} from 'react-redux'; 
import App from '../components/app' 
import {bindActionCreators} from 'redux'; 
import {getSettings} from "../actions/index"; 

class CameraTest extends App { 
    constructor(){ 
     super(); 
    } 

    componentDidMount() { 
     console.log("settings in camera test start"); 
     console.log(this.props.getSettings()); 
     console.log("settings in camera test end"); 
     ipcRenderer.send('stepWindow:create', { }); 
    } 

    render() { 
     return (
      <div className="window-wrapper"> 
       <div className="main-content"> 
        CameraTest div 
       </div> 
       <Navigation nextRouteUrl="/camera-test" backRouteUrl="/screen-picker" /> 
      </div> 
     ) 
    } 

} 

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

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({getSettings}, dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(CameraTest); 

リデューサー/ reducer_settings.js：

import {GET_SETTINGS, SET_SETTINGS} from "../actions/index"; 

export default function (state = {},action) { 
    let newState; 

    switch (action.type){ 
     case GET_SETTINGS: 
      console.log("reducer GET_SETTINGS"); 

      console.log(state); 
      return state; 
     case SET_SETTINGS: 
      newState = { ...state, ["settings"]: action.payload }; 
      console.log("Start newstate"); 
      console.log(newState); 
      console.log("End newstate"); 
      return newState; 

     default: 
      return state 
    } 
} 

アクション/インデックス。 js

export const SET_SETTINGS = 'SET_SETTINGS'; 
export const GET_SETTINGS = 'GET_SETTINGS'; 

export function setSettings(values, callback){ 
    return { 
     type: SET_SETTINGS, 
     payload: values 
    } 
} 

export function getSettings(){ 
    console.log("actions#getSettings"); 

    return { 
     type: GET_SETTINGS, 
     payload: "" 
    } 
} 

Answer 1

getSettingアクション作成者は必要ありません。

は、このような設定にアクセスしました。

componentDidMount() { 
    console.log("settings in camera test start"); 
    const { settings} = this.props; 
    console.log(settings); 
    console.log("settings in camera test end"); 
    ipcRenderer.send('stepWindow:create', { }); 
} 

あなたのオブジェクトを設定と呼んでいると仮定します。通常、オブジェクトには、レジューサーでエクスポートする名前が与えられます。そのmapStateToPropsオブジェクト名が小道具でいます：あなたが小道具の設定と呼ばれるオブジェクトを参照することができない場合ので、あなたはあなたの減速機能に名前

export default function settings (state = {},action) { 
let newState; 

switch (action.type){ 
    case GET_SETTINGS: 
     console.log("reducer GET_SETTINGS"); 

     console.log(state); 
     return state; 
    case SET_SETTINGS: 
     newState = { ...state, ["settings"]: action.payload }; 
     console.log("Start newstate"); 
     console.log(newState); 
     console.log("End newstate"); 
     return newState; 

    default: 
     return state 
} 
} 

EDITを与える必要があります。