React-Redux的基本使用

一、引入文件

安装redux
cnpm install redux --save

安装react_redux
npm install react_redux —save

二、项目目录src文件夹下新建store文件夹（src/store/index.js）
index.js文件内容：

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

三、store文件夹路径下新建reducer.js文件（src/store/reducer.js）
reducer就是根据action来对state进行操作(文件中没有将action声明为常量，也可以建立一个constants.js文件，将方法名声明为常量)

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

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

  if(action.type === 'inputVlueChange'){
    const newState = JSON.parse(JSON.stringify(state))
    newState.inputValue = action.value
    return newState
  }
  
  if(action.type === 'addListData'){
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.push(state.inputValue)
    newState.inputValue = ''
    return newState
  }

  if(action.type === 'deleateItem'){
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.splice(action.value, 1)
    return newState
  }

  return state
}

四、react-redux中Provider的使用
1、在项目入口index.js文件中，引入Provider和上面创建的store，同时引入组件;
2、将需要使用store的组件包裹在Provider中，只有包裹Provider后才能传递reducer中的数据和action

import React from 'react';
import ReactDOM from 'react-dom';

import TodoList from './TodoList'
import { Provider } from 'react-redux'
import store from './store/index'

const App = (
  <Provider store={store}>
    <TodoList />
  </Provider>
)

ReactDOM.render(
  App
  ,
  document.getElementById('root')
);

五、react-redux中connect的使用
在组件TodoList中引入connect

import React from 'react';
import {connect} from 'react-redux'

// 无状态组件
const TodoList = (props)=>{
  let { inputValue, inputChange, addListData, deleateItem} = props
  return (
    <div>
      <div>
        <input placeholder='请输入内容' 
               value={inputValue} 
               onChange={inputChange}/>
        <button onClick={addListData}>提交</button>
      </div>
      <ul>
        {
          props.list.map((item, index) => {
            return (
              <li key={index} onClick={()=>deleateItem(index)}>{item}</li>
            )
          })
        }
      </ul>
    </div>
  );
}

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

const dispatchToProps = (dispatch)=>{
  return {
    inputChange(e){
      const action = {
        type: 'inputVlueChange',
        value: e.target.value
      }
      dispatch(action);
    },

    addListData(){
      const action = {
        type: 'addListData',
      }
      dispatch(action);
    },

    deleateItem(index){
      const action = {
        type: 'deleateItem',
        value: index
      }
      dispatch(action);
    }
  }
}

export default connect(stateToProps, dispatchToProps)(TodoList);

connect中两个参数
stateToProps：将store中的数据作为props绑定到组件上；
dispatchToProps：将store中的action作为props绑定到组件上。
如上使用connect函数连接后，在组件TodoList中的props中就可以使用store中的数据inputValue和方法inputVlueChange等等

最后编辑于：2020.08.14 17:27:22