Reactjs Redux:仅在一个位置更新状态

Reactjs Redux:仅在一个位置更新状态,reactjs,oop,ecmascript-6,redux,react-redux,Reactjs,Oop,Ecmascript 6,Redux,React Redux,我是redux新手,我正在尝试通过我的调查组件中的道具更新状态 在my console.log中,我的reducer中的状态正在更新,但我的应用程序状态保持不变 在my Router.js中 const intialState = { currentQuestionId: 1, } function reducer(state = intialState, action) { console.log('reducer', state, action) switch (action.

我是redux新手,我正在尝试通过我的调查组件中的道具更新状态

在my console.log中,我的reducer中的状态正在更新,但我的应用程序状态保持不变

在my Router.js中

const intialState = {
  currentQuestionId: 1,
}

function reducer(state = intialState, action) {
  console.log('reducer', state, action)
  switch (action.type) {
    case 'INCREMENT':
      return {
        currentQuestionId: state.currentQuestionId + 1,
      }
    case 'DECREMENT':
      return {
        currentQuestionId: state.currentQuestionId - 1,
      }
    default:
      return state
  }
}

const store = createStore(reducer)

const Router = () => (
  <BrowserRouter>
    <Switch>
      <Provider store={store}>
        <Route path="/survey/:surveyName" component={CNA} />
        <Route component={NotFound} />
      </Provider>
    </Switch>
  </BrowserRouter>
)

因此,看起来我的减速器实际上正在更改状态,但是,我的调查组件似乎没有意识到这些更改

似乎
const{questions}=this.props
至少应该是
const{questions,currentQuestionId}=this.props
。React
这个。state
和Redux state是两个不同的东西。啊,是的,这就是问题所在,谢谢
class Survey extends Component {
  constructor(props) {
    super(props)
    this.state = {
      currentQuestionId: 1,
    }

  }

  previousQuestion = () => {
    this.props.decrement()
  }

  nextQuestion = () => {
    this.props.increment()
  }


  render() {
    const { currentQuestionId } = this.state
    const { questions } = this.props
    return (
      <SurveyContainer>
        {console.log('surveyState', currentQuestionId)}
        <Question
          data={questions.find(q => q.id === currentQuestionId)}
        />
        <ButtonContainer>
          {currentQuestionId > 1 && (
            <Button type="button" onClick={this.previousQuestion}>
              Previous
            </Button>
          )}
          <Button type="button" onClick={this.nextQuestion}>
            Next
          </Button>
        </ButtonContainer>
      </SurveyContainer>
    )
  }
}

const mapDispatchToProps = {
  increment,
  decrement,
}

function mapStateToProps(state) {
  return {
    currentQuestionId: state.currentQuestionId,
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Survey)
reducer {currentQuestionId: 5} {type: "INCREMENT"}
SurveyState 1