这是我的索引(应用程序组件)文件：
const mapStateToProps = (state, ownProps = {}) => {
console.log('this is from statetoprops: ', state); // state
console.log('from state to props, own Props: ', ownProps); // undefined
return {
myValue: state,
};
};
const AppWrapper = styled.div`
max-width: calc(768px + 16px * 2);
margin: 0 auto;
margin-top: 64px;
display: flex;
min-height: 100%;
padding: 0 16px;
flex-direction: column;
`;
class App extends React.Component {
render() {
return (
<div>
<Header />
<AppWrapper>
<Switch>
<Route exact path="/main/" component={HomePage} />
<Route path="/main/aboutme" component={AboutMe} />
<Route path="/main/models" component={Models} />
<Route path="/main/landscapes" component={Landscapes} />
</Switch>
</AppWrapper>
{console.log(`This is the component App props: ${this.props.myValue}`)}
<Footer />
</div>
);
}
}
export default connect(mapStateToProps)(App);
this.props.myValue 的控制台日志是：
这是组件 应用程序属性： 地图 { "路线"： 地图 { "位置"： 地图 { "路径名"： "/main"， "搜索"： "， "哈希"： "， "状态"： 未定义， "键"： "gftdcz" } }， "全局"： 地图 { "myValue"： 0 }， "语言"：地图 { "区域设置"： "en" } }
如果我这样做.props.myValue.global，我会得到未定义。我需要访问和操作 myValue 值。
这是减速器：
import { fromJS } from 'immutable';
// The initial state of the App
const initialState = fromJS({
myValue: 0,
});
function appReducer(state = initialState, action) {
console.log(`The reducer is being found and here is the state: ${state}`, ' and the action: ', action);
switch (action.type) {
case 'Name':
return {
myValue: action.payload,
};
default:
return state;
}
}
export default appReducer;
这是全局化简器文件...
/**
* Combine all reducers in this file and export the combined reducers.
*/
import { fromJS } from 'immutable';
import { combineReducers } from 'redux-immutable';
import { LOCATION_CHANGE } from 'react-router-redux';
import globalReducer from 'containers/App/reducer';
import languageProviderReducer from 'containers/LanguageProvider/reducer';
/*
* routeReducer
*
* The reducer merges route location changes into our immutable state.
* The change is necessitated by moving to react-router-redux@5
*
*/
// Initial routing state
const routeInitialState = fromJS({
location: null,
});
/**
* Merge route into the global application state
*/
function routeReducer(state = routeInitialState, action) {
switch (action.type) {
/* istanbul ignore next */
case LOCATION_CHANGE:
return state.merge({
location: action.payload,
});
default:
return state;
}
}
/**
* Creates the main reducer with the dynamically injected ones
*/
export default function createReducer(injectedReducers) {
return combineReducers({
route: routeReducer,
global: globalReducer,
language: languageProviderReducer,
...injectedReducers,
});
}
我正在使用 react/redux 样板，我正在尝试同时学习 redux，所以这是一个有趣的体验。我希望有人能在这里指出我正确的方向。
从 Redux 存储中选择值
您正在设置对 Redux 存储的全部内容的this.props.myValue，当您看起来像要选择一个特定值时。
mapStateToProps接收整个存储状态，而不仅仅是来自一个特定化简器的块。因此，您需要首先从所需的特定化简器访问状态。出于这个原因，在许多mapStateToProps的例子中，第一行使用解构来获取相关的状态片段，如下所示：
const { global } = state;
注意 - 这给了你一个名为global的变量，对于任何阅读你的代码的人来说，这个变量都会非常混乱。在JS中，"全局上下文"是一个常用的术语;虽然这可能不会破坏任何东西，但它不利于可读性。有关变量名称的建议，请参阅下文。
从根状态的该子集中，您只需要myValue属性。
所以你的mapStateToProps应该看起来像这样：
const mapStateToProps = (rootState) => { // renamed from state to rootState - this does not change the behavior, just more accurately describes what will be passed in
const { global } = rootState;
return {
myValue: global.myValue,
};
};
这也可以更简洁地写成
const mapStateToProps = (rootState) => ({ myValue: rootState.global.myValue});
使用不可变映射
由于您的状态是不可变的地图，据我所知，解构是行不通的。所以在你的mapStateToProps中，你必须做一些事情：
const global = rooState.get('global');
const myValue = global.get('myValue');
变量命名
代码使用化简器名称global化简器，该化简器在其自己的代码文件中称为appReducer。而且该化简器不是根化简器，因此它没有任何"全局"意义。术语"全局"在 redux 存储的上下文中实际上没有任何意义 - 尽管术语"根"确实如此。
如果您避免将术语global用于任何内容，并将根化简器中的化简器名称与定义化简器的文件的名称(或其代码文件中给出的名称)匹配，这将有助于减少混淆(对于阅读您的代码的其他人，也可能是为了您自己)。因此，我建议在combineReducers通话中使用名称app而不是global。更好的是将其命名为更有意义的名称，尽管我知道您在这里处于概念验证阶段。
如果不运行代码，就很难确切地知道代码出了什么问题，但有几件事对我来说很突出：
- 当你
console.log(this.props.myValue)时，你会得到一个看起来像JavaScript对象的东西。 - 您无法键入该对象，您将无法定义。
我的第一直觉是，你的action.payload不是一个普通的JavaScript对象，而实际上是一个字符串(或者可能是其他类型的对象)。
测试这一点的一种快速方法是console.log(this.props.myValue.constructor).