react-redux得基本用法

1.创建store

import { createStore } from 'redux'; import reducers from '../reducers/index'; export default createStore(reducers);

2.reducer（接受state和action并返回新的state）

 

import { combineReducers } from "redux"; import { todo } from "./todo.js";
export default combineReducers({   todo });           const initialState = {     list:[] } export function todo(state = initialState, action){     console.log(action.payload);     if(action.type==="ADD_Todo"){         console.log("=======add=========");         let newState = JSON.parse(JSON.stringify(state));         newState.list.push({         content:action.payload         });         console.log(newState);         return newState;     }else if(action.type==="DEL_Todo"){         let newState = JSON.parse(JSON.stringify(state));         newState.list.splice(action.payload, 1);         return newState;     }else{         return state;     } }  

3.使用Provider组件

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import {HashRouter as Router,Route,Redirect,Switch} from "react-router-dom" import { Provider } from "react-redux"; import store from "./store";
ReactDOM.render(   <Provider store={store}>     <Router>       <Switch>         <Route path="/admin" component={App}/>          <Redirect to="/admin" from="/" exact/>           <Redirect to="/404" />       </Switch>     </Router>   </Provider>,   document.getElementById('root') );

4.组件里使用store

import React, { Component } from 'react' import { connect } from 'react-redux' class TodoList extends Component {   componentwillMount () {     console.log(this.props)     this.props.addTodo();   }   handleDelete(index){     this.props.deletetodo(index);   }   render() {     return (       <div>         <ul>           {             this.props.list.map((item,index)=>{               return (                 <li key={index}>                   <span>{item.content}</span>                   <button onClick={this.handleDelete.bind(this,index)}>x</button>                 </li>               )             })           }         </ul>       </div>     )   } } //2、把state里的数据映射到props里，可以通过Props使用 const mapStatetoProps = (state) =>{   return {     list:state.todo.list   } } //3、把action里的方法绑定到props上，可以通过Props使用，用于修改store里的数据 const mapdispatchToProps =(dispatch)=>{   return {     addTodo(){       dispatch({         type:"ADD_Todo",         payload:'1111111'       })     },     deletetodo(index){       dispatch({         type:"DEL_Todo",         payload:index       })     }   } }
//4、connect方法接受两个参数：mapStatetoProps和mapdispatchToProps，没有则传null export default connect(mapStatetoProps,mapdispatchToProps)(TodoList);    

组件里使用store