如何使用 reactjs redux-saga 渲染数组以列出

Question

你好这几天我正在尝试使用 redux-saga呈现产品列表。我正在使用反应样板作为我的结构。我有两个组件产品列表和产品项目：

产品列表.js

function ProductsList({ loading, error, products }) {
if (loading) {
return <List component={LoadingIndicator} />;
}
if (error !== false) {
const ErrorComponent = () => (
<ListItem item="Something went wrong, please try again!" />
);
return <List component={ErrorComponent} />;
}
if (products !== false) {
return <List items={products} component={Products} />;
}
return null;
}
ProductsList.propTypes = {
loading: PropTypes.bool,
error: PropTypes.any,
products: PropTypes.any,
};
export default ProductsList;

产品.js：

function Products(props) {
return (
<div className="contact">
<span>{props.title}</span>
</div>
);
}
Products.propTypes = {
title: PropTypes.string.isRequired
};

列表.js

function List(props) {
const ComponentToRender = props.component;
let content = <div />;
// If we have items, render them
if (props.items) {
content = props.items.map(item => (
<ComponentToRender key={`item-${item.id}`} item={item} />
));
} else {
// Otherwise render a single component
content = <ComponentToRender />;
}
return (
<Wrapper>
<Ul>{content}</Ul>
</Wrapper>
);
}
List.propTypes = {
component: PropTypes.func.isRequired,
items: PropTypes.array,
};

我的主页容器使用 ComponentDidMount 函数调用一个操作(每个都在那里工作，我调试了它(。但也许原型蚂蚁渲染有问题。

主页.js

class MainPage extends React.Component {
componentDidMount() {
this.props.onFetch();
}
render() {
const { error, loading, products } = this.props;
const reposListProps = {
loading,
error,
products,
};
return (
<article>
<Helmet>
<title>Products</title>
<meta
name="description"
content="A React.js Boilerplate application products"
/>
</Helmet>
<div>
<ProductsList {...reposListProps} />
</div>
</article>
);
}
}
PostedCasesClient.propTypes = {
loading: PropTypes.bool,
error: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
products: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
onFetch: PropTypes.func
};

export function mapDispatchToProps(dispatch) {
return {
onFetch: evt => {
dispatch(fetchProducts());
},
};
}
const mapStateToProps = createStructuredSelector({
mainPage: makeSelectPostedCasesClient
});
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
);

const withReducer = injectReducer({ key： 'main'， reducer }(; const withSaga = injectSaga({ key： 'main'， saga }(;

导出默认撰写( 带减速器， 与佐贺， 与连接， ((主页(;

后来在分散我的 fetchProduct 操作后，我使用了 sagas。这部分也有效，因为我让我的产品阵列到减速器。

佐贺.js

export function* getProducts() {
try {
let requestURL = 'http://localhost:8080/produts';
const products = yield call(request, requestURL, { method: 'GET' });
yield put(fetchProductSuccess(products));
} catch (error) {
yield put(type: 'FETCH_PRODUCTS_FAILURE', error)
console.log(error);
}
}
export default function* actionWatcher() {
yield takeLatest(FETCH_PRODUCTS_BEGIN, getProducts)
}

减速器.js

const initialState = fromJS({
loading: false,
error: false,
items: false
});
function ProductsReducer(state = initialState, action) {
switch(action.type) {
case FETCH_PRODUCTS_BEGIN:
return state
.set('loading', true)
.set('error', false)
.setIn('items', false);
case FETCH_PRODUCTS_SUCCESS:
return state
.setIn('items', action.products)
.set('loading', false)
case FETCH_PRODUCTS_FAILURE:
return state.set('error', action.error).set('loading', false);
default:
return state;
}
}

也许有人可以告诉我我做错了什么？如果您需要更多代码，请告诉我，我会编辑它。

编辑：

这是我的选择器：

const selectGlobal = state => state.get('global');
const makeSelectMainClient = () =>
createSelector(selectMainPageDomain, substate => substate.toJS());
const makeSelectLoading = () =>
createSelector(selectGlobal, globalState => globalState.get('loading'));
const makeSelectError = () =>
createSelector(selectGlobal, globalState => globalState.get('error'));
const makeSelectProducts = () =>
createSelector(selectGlobal, globalState =>
globalState.getIn(['products']),
);
export default makeSelectPostedCasesClient;
export {
selectMainPageDomain,
selectGlobal,
makeSelectLoading,
makeSelectError,
makeSelectProducts,
};

Answer 1

您需要更新连接MainPage组件的mapStateToProps函数以接收新化简器中的数据。 目前您有：

const mapStateToProps = createStructuredSelector({
mainPage: makeSelectPostedCasesClient
});

但是，您的组件期望接收loading、error和products。 您需要创建一个mapStateToProps函数，为组件提供这些变量。 像这样：

const mapStateToProps = createStructuredSelector({
products: makeSelectProducts(),
loading: makeSelectLoading(),
error: makeSelectError(),
});

您可能需要编写自己的选择器才能将数据从ProductsReducer中获取。 完成此操作后，当您的化简器获取新数据时，选择器将自动获取新数据并更新您的组件。