react+redux+react-redux练习项目

一，项目目录

二、1、新建pages包，在pages中新建TodoList.js；

2、新建store包，在store包中新建store.js,reducer.js,actionCreater.js,actionType.js；

3、在public包中新建list.json

三、安装redux,react-redux,axios

yarn add  redux --save， yarn add  react-redux --save，yarn add  axios --save

四、index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import * as serviceWorker from './serviceWorker';
 import { Provider } from 'react-redux'
 import TodoList from './pages/TodoList'
 import store from './store/store'

 const App =(
     <Provider store={store}>
         <TodoList />
     </Provider>
 );
 ReactDOM.render(App, document.getElementById('root'));

 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister();

使用react-redux。在react-redux的使用中，关注两个方法：Provider和connect

• Provider把store放到context里，所有的子元素可以直接取到store（<TodoList/>和其他所有添加在<Provider></Provider>中的组件），本质上 Provider 就是给 connect 提供 store 用的。
• connect 是一个高阶组件，接受一个组件 WrappedComponent 作为参数，负责链接组件，把给到redux里的数据放到组件的属性里。主要有两个作用：1. 负责接受一个组件，把state里的一些数据放进去，返回一个组件；2. 数据变化的时候，能够通知组件

五、store.js

 import { createStore,applyMiddleware,compose} from 'redux';
 import reducer from './reducer';
 import thunk from 'redux-thunk';

 //添加redux工具
 const composeEnhancers= window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

 const enhancerss = compose(
     applyMiddleware(thunk),composeEnhancers
 );
 const store=createStore(reducer,enhancerss);

 export default store;

引入redux-thunk中间件 他允许你的action可以返回函数和对象（不使用中间件只能返回对象）, 带有dispatch和getState两个参数, 在这个action函数里, 异步的dispatch action;

六、reducer.js

 const defaultState={
 inputValue:'',
     list:[]
 }

 export default (state=defaultState,action)=>{

     switch(action.type){
         case "change_input_value":
         {
             const newState =JSON.parse(JSON.stringify(state))
             newState.inputValue=action.value;
             return newState;
         }
         case "add_item":
         {
             const newState =JSON.parse(JSON.stringify(state))
             newState.list.push(newState.inputValue)
             return newState
         }
         case "init_list_action":
         {
             const newState=JSON.parse(JSON.stringify(state));
             newState.list=action.data;
             return newState;
         }
         case "delete_item":
         {
             const newState=JSON.parse(JSON.stringify(state));
             newState.list.splice(action.index, 1)
             return newState;
         }
         default:
         return state
     }

 }

七、actionType.js

 export const CHANGE_INPUT_VALUE='change_input_value'
 export const ADD_ITEM='add_item'
 export const INIT_LIST_ACTION='init_list_action'
 export const DELETE_ITEM='delete_item'

八、actionCreater.js

 import axios from 'axios'
 import {CHANGE_INPUT_VALUE,ADD_ITEM,INIT_LIST_ACTION,DELETE_ITEM} from './actionType'

 export const initListAction = (data)=>({
     type: INIT_LIST_ACTION,
     data
 })

 export const deleteItem =(value)=>({
     type:DELETE_ITEM,
     value
 })
 export const additem =(value)=>({
     type:ADD_ITEM,
     value
 })

 export const changeValue =(value)=>({
     type:CHANGE_INPUT_VALUE,
     value
 })

 export const getTodoList=()=>{
     return(dispatch)=>{
         axios.get('./list.json').then((res)=>{
             const data=res.data
             const action =initListAction(data)
             dispatch(action);
         })
     }
 }

九、TodoList.js

 import React from 'react';
 import store from '../store/store'
 import { connect} from 'react-redux'
 import {initListAction,getTodoList,additem,changeValue,deleteItem} from '../store/actionCreater'

  class TodoList extends React.Component{
     constructor(){
         super();
         this.state=store.getState();
     }

      componentDidMount(){
        const action=getTodoList();
        store.dispatch(action);
      }
     render(){
         const {list,inputValue,changeInputValue,handleAddClick,handleDelete} = this.props
         return(
             <div>
                 <div>
                     <input value={inputValue} onChange={changeInputValue}></input>
                     <button onClick={handleAddClick}>提交</button>
                 </div>
                     <ul>
                         <li>
                             {
                               list &&list.map((item,index)=>{
                                     return <li onClick={()=>{handleDelete(index)}} key={index}>{item}</li>
                             })
                             }
                         </li>
                     </ul>
             </div>
         )
     }
 }

 const mapStateToProps =(state)=>{
     return {
         inputValue:state.inputValue,
         list:state.list
     }
 }

 const mapDispatchToProps =(dispatch)=>{
     return{
         changeInputValue(e){
             const action=changeValue(e.target.value)
              dispatch(action)
         },
         //新增数据
         handleAddClick(){
             const action =additem()
             dispatch(action)
         },
         //删除数据
         handleDelete(index){
           const action=deleteItem(index)
           dispatch(action)
         }
     }
 }
 export default connect(mapStateToProps,mapDispatchToProps)(TodoList);//和store做连接

十、list.json

["hello","nihao","haha"]