react-typescipt(ts)中配置redux

下载相关依赖

npm install @types/axios axios -s

npm install react-router-config react-router-dom@5.2.0 @types/react-router-config @types/react-router-dom@5.2.0 -S

目录如下

 再src文件下新建store文件

在store中新建action.ts文件

export const SET_AGE='set_age';
export const SET_NAME='set_name';
 
export const setAge=function(n:any){
  return {
    type:SET_AGE,
    n:n
  }
  
}
export const setName=function(name:any){
  return {
    type:SET_NAME,
    name:name
  }
}

 在store中新建action.ts文件

import { createStore } from "redux";
import { SET_AGE,SET_NAME} from "./action";


interface User{
  name:string,
  age:number
}


function user(state:User = { name: "blue", age: 18 }, action:any) {
  switch (action.type) {
    case SET_AGE:
      return {
        ...state,
        age: state.age * action.n,
      };
      case SET_NAME:
      return {
        ...state,
        name: action.name,
      };
 
    default:
      return state;
  }
}
 
export default createStore(user);

app.tsx中引入

import { renderRoutes } from 'react-router-config'
import routes from './routes'
import { RouteConfig } from 'react-router-config'
import {connect} from "react-redux"

 

interface Props {

}
interface State {

}

class App extends Component<Props, State>{
  constructor(props: Props) {
    super(props)
    this.state = {
      // routes=RouteConfig
    }
  }
  render() {
    return (
      <div className="App">
        <div>
          {renderRoutes(routes as RouteConfig[])}
        </div>
      </div>
    );
  }
}
export default connect((props,state)=>Object.assign({},props,state),{})(App)

在index.tsx中

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter as Router } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from "./store";
ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>
  ,
  document.getElementById('root')
);
reportWebVitals();

现在就配置好了

新建一个组件来试一下

 news.tsx中放入

import { Component } from "react";
import {connect} from "react-redux"
import {setAge} from '../store/action'
interface State{}
interface Props{
    setAge:Function,
    age:number
  }
class News extends Component<Props,State>{
    // }
    FnAdd(){
        console.log(this.props.setAge(18))
    }
    render(){
        console.log(this.props,99996666)
        return (<div onClick={this.FnAdd.bind(this)}>点击修改：{this.props.age}this is news</div>)
    }
}
export default connect((props,state)=>Object.assign({},props,state),{
    setAge}
)(News)

最后一步运行项目

npm start

效果如下 ：

点击之后效果