Состояние Redux обновлено, но mapStateToProps не вызывается

Question

Когда я изменяю введенное текстовое значение и нажимаю кнопку «Сохранить», имя категории будет изменено.

---

CategoryName.js

class CategoryName extends Component {

        render() {
                return (
                    <>  
                       <section className="CategoryName">
                          <div>
                             <div>{this.props.categoryName}</div>
                          </div>
                       </section>
                    </>
                )
        }
 }

// react-redux 
const mapStateToProps = (state) => {
    console.log(state.categoryName);
    return {categoryName: state.categoryName}
};

export default connect(mapStateToProps)(CategoryName);

---

/ CategoryName / index.js

import {re_modifyCategoryName} from './reducers/index.js'

const store = createStore(re_modifyCategoryName)

class CategoryList extends Component {
    render() {
        return(
            <>
               <div>
                   <Provider store ={store}>
                      <CategoryName />
                   </Provider>
                   <Provider store ={store}>
                      <CategoryName />
                   </Provider>
               </div>
           </>
        )
    }
}
export {CategoryList}

---

/ redurs / index.js

import * as types from '../actions/ActionTypes';

var initialState = {
    categoryName: 'default name in redux'
};



function re_modifyCategoryName(state=initialState, action) {
    switch(action.type) {
        case types.MODIFY_CATEGORY_NAME :
            return {
                ...state,
                categoryName : action.categoryName,
            }

        default:
            return state;

    }
}

export {re_modifyCategoryName}

---

ModifyCategoryName.js

class ModifyCategoryName extends Component {

    state = {
        categoryName : "default name",
    }



    _saveModifyCategoryName = () => {

        this.props.onModifyCategoryName(this.state.categoryName)
    }

    _onChange = (e) => {
        this.setState({
            categoryName : e.target.value
        })
    }

    render(){
        return (
            <>
                <div className="ModifyCategoryName">
                    <div className="ModifyCategoryNameWrapper">
                        <div>
                            <div>
                                Header
                            </div>
                            <div>
                                <input className="ModifyCategoryNameInput" type="text" onChange={this._onChange} />
                            </div>
                            <div>
                                <button onClick={this._saveModifyCategoryName}>save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}

const mapDispatchToProps = (dispatch) => ({

    onModifyCategoryName: (categoryName) => {
        dispatch(actions.modifyCategoryName(categoryName))
    }
})

export default connect(null, mapDispatchToProps)(ModifyCategoryName)

---

/ ModifyCategoryName / index.js

import {re_modifyCategoryName} from './reducers/index.js'

const store = createStore(re_modifyCategoryName)


ReactDOM.render(
<Provider store={store}>
    <ModifyCategoryName />
</Provider>, document.getElementById('modify-category-name-modal'))

---

/ actions / index.js

import * as types from './ActionTypes';

export const modifyCategoryName = (categoryName) => ({
    type: types.MODIFY_CATEGORY_NAME,
    categoryName
});

---

Поскольку я вставляю console.log(state.categoryName) в const mapStateToProps в CategoryName.js , когда страница отображается в первый раз'default name in redux', что составляет initialState.categoryName из redux store, отображается в консоли, а {this.props.categoryName} в CategoryName.js .Я думаю, это доказывает, что redux store хорошо соединяется с CategoryName.js .

Кроме того, когда я пишу текст 'change category name' как новое значение ввода текста и нажимаю кнопку «Сохранить»,тогда отправка (действие) в _saveModifyCategoryName в ModifyCategoryName.js будет запущена, и состояние хранилища резервов будет изменено на reducer.Если вы видите это из моего redux-dev-tool, вы можете проверить, что 'default category name' заменено на 'change category name'.Я думаю, это доказывает, что dispatch(action) и redux update идут хорошо.

Однако, как вы видите на изображении выше, состояние приставки обновляется, но mapStateToProps не вызывается .. Определенно, console.log(state.categoryName) in mapStateToProps вызывается при первом отображении страницы, но даже если state of redux изменено, любое изменение не отображается в console и {this.props.categoryName} в CategoryName.js

Что со мной не так?

Answer 1

Я действительно дурак.

Мне нужно использовать <Provider store ={store} /><Provider /> в верхней части дерева компонентов ... но я не ... тогда new components извлечено connect(mapStateToProps, mapDispatchToProps) не делитьсято же самое redux store.