问为什么不更新视图呢？
EN

Stack Overflow用户

提问于 2021-06-28 11:38:41

回答 4查看 34关注 0票数 0

HelloWorld函数中的console.log函数正在显示更新状态，那么为什么渲染函数中的段落没有更新？我似乎不能修复渲染而不是更新。代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {configureStore} from '@reduxjs/toolkit';
var initialState = {value: 0};
function counterReducer(state=initialState,action) {
    if(action.type === 'counter/increment') {
        return { 
            ...state,
            value: state.value + 1
        }
    } else {
        return state;
    }
}
const store = configureStore({reducer: counterReducer});
store.dispatch({type: 'counter/increment'});
class Counter extends React.Component {
    HelloWorld = () => {
        store.dispatch({type: 'counter/increment'});
        console.log(store.getState().value);
    }
    render() {
        return (
            <div>
            <p>{store.getState().value}</p>
            <button onClick={this.HelloWorld}>Add</button>
            </div>
        );
    }
}
ReactDOM.render(<Counter />,document.getElementById('root'));

javascript

redux

回答 4

Stack Overflow用户

发布于 2021-06-29 12:15:19

我必须使用'React-Redux‘和@ReduxJS/toolkit来获取render()函数来更新网页。让ReduxJS/toolkit更新网页而不使用'React-Redux'？答:你使用store.subscribe()函数代替，例如)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {configureStore} from '@reduxjs/toolkit';
var initialState = {value: 0};
function counterReducer(state=initialState,action) {
    if(action.type === 'counter/increment') {
        return { 
            ...state,
            value: state.value + 1
        }
    } else {
        return state;
    }
}
const store = configureStore({reducer: counterReducer});
class Counter extends React.Component {
    HelloWorld = () => {
        store.dispatch({type: 'counter/increment'});
        console.log(store.getState().value);
    }
    render() {
        return (
            <div>
            <p id="update"></p>
            <button onClick={this.HelloWorld}>Add</button>
            </div>
        );
    }
}
function Two() {
    document.getElementById("update").innerHTML = store.getState().value;
}
store.subscribe(Two);
ReactDOM.render(<Counter />,document.getElementById('root'));

更多信息Why

票数 0

Stack Overflow用户

发布于 2021-06-30 12:25:17

下面是如何使用React-Redux来做ReduxJS/toolkit：

import React from 'react';
import ReactDOM from 'react-dom';
import {configureStore} from '@reduxjs/toolkit';
import {Provider,useSelector} from 'react-redux';
var initialState = {value: 0};
function counterReducer(state=initialState,action) {
    if(action.type === 'counter/increment') {
        return {
            ...state,
            value: state.value+1
        };
    }
    return state;
}
const store = configureStore({reducer: counterReducer});
function Counter() {
    function HelloWorld() {
        store.dispatch({type: 'counter/increment'});
    }
    let x = useSelector((state) => state.value);
    return (
        <div>
        <p>{x}</p>
        <button onClick={HelloWorld}>Add</button>
        </div>
    );
}
ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

票数 0

Stack Overflow用户

发布于 2021-07-01 15:45:37

如何回答mapStateToProps (老式的方式)？

import React from 'react';
import ReactDOM from 'react-dom';
import {configureStore} from '@reduxjs/toolkit';
import {Provider,connect} from 'react-redux';
var initialState = {value: 0};
function counterReducer(state=initialState,action) {
    if(action.type === 'counter/increment') {
        return {
            ...state,
            value: state.value+1
        };
    }
    return state;
}
const store = configureStore({reducer: counterReducer});
function Counter(props) {
    function HelloWorld() {
        store.dispatch({type: 'counter/increment'});
    }
    return (
        <div>
        <p>{props.x}</p>
        <button onClick={HelloWorld}>Add</button>
        </div>
    );
}
const mapStateToProps = (state) => ({
    x: state.value
})
Counter = connect(mapStateToProps)(Counter);
ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
);