通过从非反应组件调度操作来更新 React 组件
Posted
技术标签:
【中文标题】通过从非反应组件调度操作来更新 React 组件【英文标题】:Update React component by dispatching action from non-react component 【发布时间】:2016-07-27 05:27:50 【问题描述】:当用户将商品添加到购物车时,我正在尝试更新项目上的购物车按钮。
我已经在 React.js 中构建了网站的某些部分——比如购物车、购物车按钮等。
configureStore.js:
export default function configureStore(initialState)
const store = createStore(
reducers,
initialState
return store
行动:
export function updateCart(payload)
return
type: CART_UPDATE,
payload: payload
减速器:
export default function cart(state = , action)
switch (action.type)
case CART_UPDATE:
const cart =
data: action.payload.cart,
errors: action.payload.errors,
isFetching: false
;
return
...state,
...cart
;
return state;
CartButton.js
... componnent etc.
function mapStateToProps(state)
return
cart: state.cart.data
;
export default connect(mapStateToProps)(CartButton);
提供者
import configureStore from './store/configureStore'
var store = configureStore();
ReactDOM.render((<Provider store=store><Cart showControls=true /></Provider>), document.getElementById('react-cart'));
我正在调度一个应该从这样的非反应组件更新购物车数量的操作:
// imports
import dispatch from 'redux';
import updateCart from '../../actions/cart_actions';
import configureStore from '../../store/configureStore'
var store = configureStore();
然后..
store.dispatch(updateCart(response));
动作被调度并且状态被更新。购物车按钮组件通过连接。 react-redux connect() 函数。但不知何故,它并没有用新数量更新组件。
当我从我的购物车 React 组件中调度一个动作时,它工作正常。
我可能遗漏了一些明显的东西。有什么建议吗?
【问题讨论】:
您是否绝对确定您在 samestore
上调用调度,该store
传递给您的<Provider />
?
如rossipedia所说,你是只实例化了一个store,还是多次调用createStore
?
我很确定我使用的是同一家商店。我已经更新了更详细的代码 sn-ps。我不明白为什么它不更新。正如我在帖子中提到的那样;当我从 Cart.js 组件更新时, CartButton.js 中的数量正在更新。
我尝试设置 shouldComponentUpdate() return true; 在我的 CartButton.js 组件中,但仍然没有运气。
呃,您的代码几乎表明您正在创建两个商店。一个在您的“提供者”部分,一个在“导入......然后”部分。这并不难测试,在你的 mapStateToProps
函数中设置一个断点,看看你的新预期状态是否曾经传递给你的组件。
【参考方案1】:
所以我最终发现,你不应该在多个地方定义你的商店。
我只是从我的根 app.js 文件中导入了 store 常量,如下所示:
从'./app'导入 store ;
【讨论】:
感谢@Sacho 澄清以上是关于通过从非反应组件调度操作来更新 React 组件的主要内容,如果未能解决你的问题,请参考以下文章