Javascript react组件不从redux存储呈现新数据_Javascript_Reactjs_Redux

Javascript react组件不从redux存储呈现新数据

javascript reactjs redux

Javascript react组件不从redux存储呈现新数据,javascript,reactjs,redux,Javascript,Reactjs,Redux,我正在使用react和redux，我想在react视图中更新我的计数器值，我能够控制我的redux存储的最新状态，但它不会反映在我的react视图中 const counter = (state = 0, action) => { console.log(action); if(action.type == "INCREMENT") return state + 1; if(action.type == "DECREMENT") return state - 1

我正在使用react和redux，我想在react视图中更新我的计数器值，我能够控制我的redux存储的最新状态，但它不会反映在我的react视图中

const counter = (state = 0, action) => {
  console.log(action);
  if(action.type == "INCREMENT")
    return state + 1;
  if(action.type == "DECREMENT")
    return state - 1;
  else 
    return state; // return same state if action not identified  
}

const {createStore} = Redux;

const store = createStore(counter);

class Counter extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
      <div>{this.props.state.getState()}</div>
      <button onClick={this.props.onIncrement} >INC</button>
      <button onClick={this.props.onDecrement} >DEC</button>
      </div>
    );
  }
}


const render = () => {
  ReactDOM.render(
    <Counter 
    state={store} 
    onIncrement={
      () => store.dispatch({ type : "INCREMENT" })
    }
    onDecrement={
      () => store.dispatch({ type : "DECREMENT" })
    }
  />,
  document.querySelector('#counter'));
}

store.subscribe(function() {
  console.log(store.getState())
});

render();

const计数器=（状态=0，操作）=>{
控制台日志（操作）；
如果（action.type==“增量”）
返回状态+1；
如果（action.type==“减量”）
返回状态-1；
其他的
返回状态；//如果未标识操作，则返回相同的状态
}
const{createStore}=Redux；
常量存储=创建存储（计数器）；
类计数器扩展了React.Component{
构造函数（）{
超级（）；
}
render（）{
返回(
{this.props.state.getState（）}
集成数字控制
十二月
);
}
}
常量渲染=（）=>{
ReactDOM.render(
dispatch（{type:“INCREMENT”}）
}
增稠剂={
（）=>store.dispatch（{type:“DECREMENT”}）
}
/>,
document.querySelector（“#counter”）；
}
store.subscribe（函数（）{
console.log（store.getState（））
});
render（）；

React不会在每次Javascript数据更改时自动重新呈现视图，即使您的视图已绑定到该数据

React组件仅在少数情况下重新渲染：

在组件内部调用

this.setState（{…}）

将重新渲染父组件

还有一些其他方法可以强制重新渲染，但不推荐使用，因为它们的速度要慢得多，并且会使应用程序运行缓慢

要更正示例，请对

状态

对象上的实际数据进行数据绑定，而不是

道具

。这种方法可以在计数器更改时仅重新渲染组件。在小样本中，这可能不是很重要，但当您希望重用组件或将其嵌入到更大的页面中时，这一点非常重要

然后订阅您的存储，并在回调中调用

setState

，进行任何更改。这样，React就可以决定何时实际进行重新渲染

class Counter extends React.Component {
  constructor(props) {
    super();
    this.state = {counter: 0}; // Setup initial state
    this.storeUpdated = this.storeUpdated.bind(this);
    props.store.subscribe(this.storeUpdated); // Subscribe to changes in the store
  }

  storeUpdated() {
    this.setState( // This triggers a re-render
      {counter: this.props.store.getState()});
  }

  render() {
    return (
      <div>
      <div>{this.state.counter}</div>
      <button onClick={this.props.onIncrement} >INC</button>
      <button onClick={this.props.onDecrement} >DEC</button>
      </div>
    );
  }
}

类计数器扩展React.Component{
建造师（道具）{
超级（）；
this.state={counter:0}；//安装程序初始状态
this.storeUpdated=this.storeUpdated.bind（this）；
props.store.subscribe（this.storeUpdated）；//订阅存储中的更改
}
storeUpdated（）{
this.setState（//这会触发重新渲染
{counter:this.props.store.getState（）}）；
}
render（）{
返回(
{this.state.counter}
集成数字控制
十二月
);
}
}

在您玩了一段时间并熟悉Redux和React的工作原理后，我建议您查看以下库：

在这里获取图书馆：
有关此库的教程，请参见

这将以一种比您自己手动执行所有绑定更干净的方式处理React和Redux之间的桥梁。