mapStateToProps
是 Redux 中的一个函数,用于将 Redux store 中的状态映射到 React 组件的 props 上。如果你发现 mapStateToProps
没有将状态分配给 props,可能是以下几个原因造成的:
connect
函数将组件与 Redux store 连接起来。connect
函数将组件与 Redux store 连接起来。mapStateToProps
映射过来的 props。mapStateToProps
映射过来的 props。mapStateToProps
被调用,并且返回了预期的对象。以下是一个完整的示例,展示了如何使用 mapStateToProps
和 connect
来连接 Redux store 和 React Native 组件:
// actions.js
export const UPDATE_DATA = 'UPDATE_DATA';
export function updateData(data) {
return { type: UPDATE_DATA, payload: data };
}
// reducer.js
import { UPDATE_DATA } from './actions';
const initialState = { someData: null };
export default function someReducer(state = initialState, action) {
switch (action.type) {
case UPDATE_DATA:
return { ...state, someData: action.payload };
default:
return state;
}
}
// store.js
import { createStore, combineReducers } from 'redux';
import someReducer from './reducer';
const rootReducer = combineReducers({
someReducer,
});
const store = createStore(rootReducer);
export default store;
// MyComponent.js
import React from 'react';
import { connect } from 'react-redux';
import { updateData } from './actions';
function MyComponent(props) {
React.useEffect(() => {
// 假设这里是一个异步操作,比如从Firebase获取数据
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
props.updateData(data);
};
fetchData();
}, [props.updateData]);
return <div>{props.someData}</div>;
}
const mapStateToProps = (state) => ({
someData: state.someReducer.someData,
});
export default connect(mapStateToProps, { updateData })(MyComponent);
确保你的应用中已经正确设置了 Redux store,并且所有的组件都通过 connect
函数与 store 连接。如果问题仍然存在,建议检查 Redux DevTools 中的状态变化,以及确保所有的 action 都被正确分发和处理。
领取专属 10元无门槛券
手把手带您无忧上云