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.