Reduxストアはリデューサーから状態を取得できません

Question

私はストアを作成しましたが、ストアに状態がないことを確認しましたが、リデューサーはストアに状態があります。 何の状態がストアに存在しないので、私はすべてで私のコンポーネントを初期化することはできません...ここで

は、シミュレータからのエラーメッセージです：

ここではコードです：

configureStoreは、 ：

import { AsyncStorage } from 'react-native'; 
import { applyMiddleware, createStore, compose } from 'redux'; 
import thunk from 'redux-thunk'; 
import createLogger from 'redux-logger'; 
import {persistStore, autoRehydrate} from 'redux-persist'; 
import reducers from '../reducers'; 

var isDebuggingInChrome = __DEV__ && !!window.navigator.userAgent; 
var logger = createLogger({ 
predicate: (getState, action) => isDebuggingInChrome, 
    collapsed: true, 
    duration: true, 
}); 

var middlewares = compose(applyMiddleware(thunk, logger), autoRehydrate()); 

export default function configureStore() { 
    console.log('Reducer'+reducers) 

    const store = createStore(reducers, undefined, middlewares); 

    persistStore(store, {storage: AsyncStorage}); 

    if (isDebuggingInChrome) { 
     window.store = store; 
    } 
    return store; 
} 

リデューサー/ prepareConnect：

import * as types from '../constants/ActionTypes'; 

const initialState = { 
    readyButtonState:false, 
    appearImage:'./img/bpm1_setwifi_unready@2x.png' 
} 

export default function prepareConnect(state = initialState,action) { 
    switch (action.type){ 
     case types.CONNECT_CLICK_READY: { 
      return Object.assign({},state,{ 
       readyButtonState:action.currentState, 
       appearImage:action.currentImage, 
      }) 
     } 
      break; 
     default: 
      return state; 
      break; 
    } 
} 

の減速/インデックスここ

import { combineReducers } from 'redux'; 
import prepareConnect from './prepareConnect'; 

const rootReducer = combineReducers({ 
    prepareConnect 
}); 

export default rootReducer; 

ここ成分が

import React, {Component} from 'react'; 
import { 
    StyleSheet, 
    Image, 
    TouchableOpacity, 
    View, 
    Text, 
    Button, 
} from 'react-native'; 

import screenRelated from '../../Macro&Const/UIConst' 
import BasicStyle from '../../styles/Basic' 

class Bottom extends Component { 
static props = { 
    isClick:false, 
} 

constructor(props) { 
    super(props); 
    this.state = { 
      isClick:false, 
    } 
} 

_onPressButton =() =>{ 
    //TODO:点击的时候去创建Action, 并且Dispatch 
    //FIXME: 为什么这里去传递的参数给不到actionCreator里面 
    //发现压根在用的时候就是undefined, 为什么拿不到, 明明已经写了是False了. 
    this.props.isClick = !this.props.isClick; 
    this.setState({ 
     isClick:!this.state.isClick, 
    }) 
    this.props.actions.connectReadyClick(this.state.isClick) 
} 

_nextButtonClick =() =>{ 
    //TODO: 只要能点击 就是跳进下一个界面 
} 

render() { 
    return (
     <View style={BasicStyle.container}> 
      <TouchableOpacity onPress={this._onPressButton} 
           style={styles.upperButton}> 
       <View style={styles.innerContainer}> 
        <Image 
         style={styles.image} 
        source={require(this.props.appearImage)}/> 
        <Text style={styles.text}>Ready to connect</Text> 
       </View> 
      </TouchableOpacity> 
      <View style={styles.nextButton}> 
       <Button onPress={this._nextButtonClick} 
         disabled={!this.props.buttonState} 
         title='Next' 
         color='red' 
         style={styles.nextButton}/> 
      </View> 
     </View> 
    )} 
} 

const styles = StyleSheet.create({ 
    innerContainer: { 
     flex: 1, 
     justifyContent: 'center', 
     flexDirection: 'column', 
    }, 
    image:{ 
     left:10, 
     height:20, 
     width:140, 
    }, 
    text:{ 
     position:'relative', 
     color: '#AEAEAE', 
     left:22, 
    }, 
upperButton:{ 
    flex:1, 
    justifyContent:'center', 
}, 
    nextButton:{ 
     position:'absolute', 
     top:230, 
     width:screenRelated.screenWidth+10, 
     alignItems:'center', 
     borderColor: 'blue', 
     borderWidth: 1, 
     borderRadius: 4, 
    } 
}) 

export default Bottom; 

Answer 1

/prepareConnect /ボトムのIは、コードスニペットを作成している/ prepareConnectView

import React, {Component} from 'react'; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 

import { 
    StyleSheet, 
    View 
} from 'react-native'; 

import Actions from '../actions'; 

import Upper from "../components/prepareConnect-view/Upper"; 
import Bottom from "../components/prepareConnect-view/Bottom"; 

class PrepareConnectView extends Component { 
    static props = {} 

constructor(props) { 
    super(props); 
    this.state = {} 
} 

render() { 
    return (
     <View> 
      <Upper/> 
      <Bottom {...this.props}/> 
     </View> 
    ) 
} 
} 

function mapStateToProps(state) { 
    return { 
     buttonState: state.readyButtonState, 
     appearImage: state.appearImage, 
    }; 
} 

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

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

容器です。 localStorageはスタックスニペットでは使用できないため、ストアをワイプしてはいけないので、永続化は機能しません。あなたが見ることができるように、あなたの店には初期状態があります。コンソールを開き、出力を確認します。

エラーを最初に修正し、それが役立つかどうかを確認してください。パッケージングツールを再起動しましたか？そして、コードの残りの部分でrequire()を使用しますか？

const {combineReducers, applyMiddleware, createStore, compose} = Redux; 
 
const thunk = ReduxThunk.default; 
 
const {persistStore, autoRehydrate} = ReduxPersist; 
 

 
const initialState = { 
 
    readyButtonState:false, 
 
    appearImage:'./img/bpm1_setwifi_unready@2x.png' 
 
} 
 

 
const prepareConnect = (state = initialState, action) => { 
 
    switch (action.type) { 
 
    case 'a type': { 
 
     return Object.assign({},state, { 
 
        readyButtonState: action.currentState, 
 
        appearImage: action.currentImage, 
 
     }) 
 
     break; 
 
    } 
 
    default: 
 
     return state; 
 
     break; 
 
} 
 
}; 
 

 
const rootReducer = combineReducers({ 
 
    prepareConnect 
 
}); 
 

 
var logger = reduxLogger.createLogger({ 
 
    predicate: (getState, action) => true, 
 
    collapsed: true, 
 
    duration: true, 
 
}); 
 

 
var middlewares = compose(applyMiddleware(thunk, logger), autoRehydrate()); 
 

 
const store = createStore(rootReducer, undefined, middlewares); 
 

 
persistStore(store); 
 

 
const state = store.getState(); 
 

 
console.log("STATE:", state);

<p id="store"></p> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.1/redux.js"></script> 
 
<script src="https://unpkg.com/redux-logger@3.0.6/dist/redux-logger.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.2.0/redux-thunk.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-persist/4.8.2/redux-persist.js"></script>

EDIT：のlocalStorageが働くので、私は、あまりにもフィドルを作成しました

：https://jsfiddle.net/ow4z71ac/

コンソールで見ることができるように 、お店期待どおりに初期化されます。

{ 
    "prepareConnect": { 
     "readyButtonState": false, 
     "appearImage": "./img/bpm1_setwifi_unready@2x.png" 
    } 
} 

EDIT2：あなたが小道具に状態をマップ

方法は動作しませんそれはこのようになります。あなたのrootReducerを見てください。 combineReducerに渡すすべての還元剤の名前は、店舗のトップレベルのキーとなります。

お店は、次のようになります理由です

const rootReducer = combineReducers({ 
    prepareConnect 
}); 

：

{ 
    "prepareConnect": { 
     "readyButtonState": false, 
     "appearImage": "./img/bpm1_setwifi_unready@2x.png" 
    } 
} 

そして、それはあなたが小道具にあなたの状態をマップしよう方法は次のとおりです。

function mapStateToProps(state) { 
    return { 
     // readyButtonState does not exist in state but in state. prepareConnect.readyButtonState 
     buttonState: state.readyButtonState, 
     appearImage: state.appearImage, 
    }; 
} 

あなたrequire()呼び出しがあるため失敗した理由もありますthis.props.appearImageはundefinedです。あなたが変更することができ

、減速がそれをインポートするときに減速の名前を変更するか、独自のキーを定義することによってのようなルックスを作成している状態のどの部分：

import initial from './prepareConnect'; 

const rootReducer = combineReducers({ 
    initial 
}); 

または

import prepareConnect from './prepareConnect'; 

const rootReducer = combineReducers({ 
    initial: prepareConnect 
}); 

それからstate.initialのあなたのインサイトデータにアクセスできます。