Reducer has a return value, and no matter how the state of reducer changes, the printed store clock is empty {}

As a matter of fact, there are several questions, which have been stuck for a long time. I don"t know why
1. If the state of both reducer has a value,
store.subscribe (() = > {

console.log("================store:"+JSON.stringify(store));

});
the printed value is always empty {}.

2. Click on the navigation to request data in the Mount component, and then execute store.dispatch (initUserAction (res)), to initialize the reducer. The state,state has data, but the store allowed in the store.subscribe is always empty.
this is the code initialized when the component is loaded

componentWillMount(){
        const {store} = this.context;
        fetch("http://localhost:3001/book")
        .then(res => res.json())
        .then(res => {
            store.dispatch(initBookAction(res));
        });
    }

this is the reducer code

const initialState = {
    data : []
};

function bookReducer(state=initialState ,action){
    switch(action.type){
        case "INIT_BOOK_ACTION":
            console.log("=====bookReducer:"+JSON.stringify(state));
            return Object.assign({},state,{
                data : [...action.payload]
            })

        case "ADD_BOOK_ACTION" : 
            return Object.assign({},state,{
                data : state.data.push(action.payload)
            })

        case "DELETE_BOOK_ACTION" :
            return Object.assign({},state,{
                data : state.data.filter(item => item.id != action.payload.id)
            })

        case "UPDATE_BOOK_ACTION" :
            return Object.assign({},state,{
                data : state.data.map(item => {
                    if(item.id == action.payload.id){
                        return Object.assign({},item,action.payload);
                    }else{
                        return item;
                    }
                })
            })
        default:
            return state
    }
}

export default bookReducer;

3. The data of the table I loaded is the data passed by mapStateToProps. Since the store is empty, why can the state passed to the mapStateToProps in the container component still take the data state.bookReducer.date, and display the data in the table?

this is the main code of render table

render(){
        const { bookList, deleteBook } = this.props; //connectprops
        const { title,visible ,confirmLoading } = this.state;
        //console.log("===================booklist props:"+JSON.stringify(this.props));
        
        const columns = [{
            title : "",
            dataIndex : "id"
        },{
            title : "",
            dataIndex : "name"
        },{
            title:"",
            dataIndex:"price"
        },{
            title:"",
            dataIndex:"owner_id"
        },{
            title:"",
            render : (text,record) => (
                <span type="ghost">
                    <Button size="small" onClick={() => this.editHandle(record)}></Button>
                    <Divider type="vertical" />
                    <Popconfirm title="" onConfirm={() => deleteBook(record)}>
                        <Button size="small" ></Button>
                    </Popconfirm>
                </span>
            )
        }];

        return (
            <div>
                <div>
                    <SearchInput addHandle={this.addHandle.bind(this)}/>
                </div>
                <Table columns={columns} dataSource={bookList}/>
                <Modal 
                    title={title}
                    visible= {visible}
                    confirmLoading = {confirmLoading}
                    onCancel = {() => this.cancelHandle()}
                    footer = {null}
                >
                    <FormLayout record={this.state.formData} comfirmHandle={this.comfirmHandle.bind(this)}/>
                </Modal>
            </div>
        );
    }

this is the code to create the container component

import { connect } from "react-redux";
import BookList from "../components/BookList";
import { deleteBookAction , addBookAction ,updateBookAction } from "../actions/bookActions";

const mapStateToProps = (state) => {
    return {
        bookList : state.bookReducer.data
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        deleteBook : (id) => {
            dispatch(deleteBookAction(id))
        },
        addBook : (data) => {
            dispatch(addBookAction(data))
        },
        editBook : (data) => {
            dispatch(updateBookAction(data))
        }
    }
}
const BookListContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(BookList);

export default BookListContainer;
The

code is a little too much. I"ll stick the github address on it. Please take a look at it for me. Thank you ~

.

github address: https://github.com/hesisi/rea.

Mar.06,2021

reducer is not registered with store

if you want to look at the problem from "Origin", take a look at your entry.js

first.
ReactDOM.render(
    <Provider store={store}>
        // routes
    </Provider>

go and see where store came from.
finally traces back to a summary registration file reducer.js: of the entire application's reducer file

import { combineReducers } from "redux";
import { routerReducer } from "react-router-redux";

import * as yourComponentReducer from './path/reducers.ts';

export default combineReducers({
  routing: routerReducer,
  ...yourComponentReducer,
});

console.log ("= listen for store changes:" + JSON.stringify (store));

the change has changed, but the posture is wrong.

store.subscribe(() => {
  console.log(store.getState()); // 
}
Menu