Store 没有 reducer initialState
Store does not have reducer initialState
我无法获取 store reducer initialState,因此我也无法映射到组件中的 props。
这是我的减速器:
const initialState = { currentUser: null }
export default function UserReducer(state = initialState, action){
let nextState;
switch(action.type){
case "USER_CONNECTED":
nextState = {
...state,
currentUser : action.value
}
return nextState;
case "USER_DECONNECTED":
nextState = {
...state,
currentUser : null
}
return nextState;
default:
return state;
}
}
这里是配置商店的class:
import { createStore, combineReducers } from 'redux';
import UserReducer from './reducers/userReducer'
const rootReducer = combineReducers({
currentUser : UserReducer
});
const configureStore = () => {
return createStore(rootReducer);
}
export default configureStore;
这里是我初始化商店并将其传递给应用程序的地方,感谢提供商:
import {AppRegistry} from 'react-native';
import React from 'react';
import App from './App';
import {name as appName} from './app.json';
import { Provider } from 'react-redux';
import configureStore from './store/store';
const Store = configureStore();
console.log("STORE :"+ JSON.stringify(Store.getState()));
const RNRedux = () => (
<Provider store = { Store }>
<App />
</Provider>
)
AppRegistry.registerComponent(appName, () => RNRedux);
当我打印上面的 "STORE" 时,它给了我正确的输出 { currentUser : ...}。然后我按如下方式将 App.js 连接到商店:
const AppNavigator = createStackNavigator(
{
NewAccount: NewAccountScreen,
Login: LoginScreen
},
{
initialRouteName: "Login"
}
);
const AppContainer = createAppContainer(AppNavigator);
export class App extends React.Component {
constructor(props, context){
super(props, context);
}
render() {
console.log("APP.JS : "+ JSON.stringify(this.props));
return (
<AppContainer />
)
}
}
export default connect()(App);
所以在最后一行,我将整个 App 状态连接到组件道具,但它给了我 {}.
您在连接调用中缺少 mapStateToProps
参数。
export default connect()(App);
您需要指定将获取部分状态并将其传递给组件属性的映射函数。
要将整个状态映射到道具,试试这个:
export default connect(state=>state)(App)
更好的做法是只传递组件需要的部分状态。这样,当状态的其他部分发生变化时,您就可以避免不必要的重新渲染。例如,如果您的连接组件只需要用户名,您可以这样做:
export default connect(state=>{firstName:state.currentUser.firstName})(App)
我无法获取 store reducer initialState,因此我也无法映射到组件中的 props。
这是我的减速器:
const initialState = { currentUser: null }
export default function UserReducer(state = initialState, action){
let nextState;
switch(action.type){
case "USER_CONNECTED":
nextState = {
...state,
currentUser : action.value
}
return nextState;
case "USER_DECONNECTED":
nextState = {
...state,
currentUser : null
}
return nextState;
default:
return state;
}
}
这里是配置商店的class:
import { createStore, combineReducers } from 'redux';
import UserReducer from './reducers/userReducer'
const rootReducer = combineReducers({
currentUser : UserReducer
});
const configureStore = () => {
return createStore(rootReducer);
}
export default configureStore;
这里是我初始化商店并将其传递给应用程序的地方,感谢提供商:
import {AppRegistry} from 'react-native';
import React from 'react';
import App from './App';
import {name as appName} from './app.json';
import { Provider } from 'react-redux';
import configureStore from './store/store';
const Store = configureStore();
console.log("STORE :"+ JSON.stringify(Store.getState()));
const RNRedux = () => (
<Provider store = { Store }>
<App />
</Provider>
)
AppRegistry.registerComponent(appName, () => RNRedux);
当我打印上面的 "STORE" 时,它给了我正确的输出 { currentUser : ...}。然后我按如下方式将 App.js 连接到商店:
const AppNavigator = createStackNavigator(
{
NewAccount: NewAccountScreen,
Login: LoginScreen
},
{
initialRouteName: "Login"
}
);
const AppContainer = createAppContainer(AppNavigator);
export class App extends React.Component {
constructor(props, context){
super(props, context);
}
render() {
console.log("APP.JS : "+ JSON.stringify(this.props));
return (
<AppContainer />
)
}
}
export default connect()(App);
所以在最后一行,我将整个 App 状态连接到组件道具,但它给了我 {}.
您在连接调用中缺少 mapStateToProps
参数。
export default connect()(App);
您需要指定将获取部分状态并将其传递给组件属性的映射函数。 要将整个状态映射到道具,试试这个:
export default connect(state=>state)(App)
更好的做法是只传递组件需要的部分状态。这样,当状态的其他部分发生变化时,您就可以避免不必要的重新渲染。例如,如果您的连接组件只需要用户名,您可以这样做:
export default connect(state=>{firstName:state.currentUser.firstName})(App)